Я хочу обернуть shaka-player
пример в директива AngularJS.
Пример проигрывателя отлично работает сам по себе и может воспроизводить MPEG-DASH версию Big Buck Bunny размещен на CDN Akamai.
Однако при попытке использовать shaka-player
в директиве AngularJS player.load(url)
терпит неудачу с this.target.addEventListener is not a function
.
Он также сообщает TypeError: Cannot read property 'textTracks' of null
. (В зависимости от браузера порядок этих ошибок иногда меняется на обратный)
Я не знаю, почему он работает автономно, но не в директиве AngularJS ...
Фрагмент HTML для директивы выглядит так:
<tq-video-player
tqsrc="source"
poster="somePicture"
id="my-video"
width="640"
height="360">
</tq-video-player>
Сам код директивы почти скопирован из кода примера. (Я также пробовал несколько вариантов обработки обещания вместо функции async
. У всех одна и та же ошибка.
var TqUiLib = TqUiLib || angular.module('tqUiLib', []);
TqUiLib.directive("tqVideoPlayer",
function($timeout, $parse)
{
var directive =
{
restrict: 'E',
template: '<video controls width="640"></video>',
scope:
{
tqsrc: '=',
poster: '=',
width: '=',
height: '='
},
link: function(scope, element, attrs)
{
console.log("tqVideoPlayer link. nodename", element[0].nodeName, element);
// Install built-in polyfills to patch browser incompatibilities.
shaka.polyfill.installAll();
// Check to see if the browser supports the basic APIs Shaka needs.
if (!shaka.Player.isBrowserSupported())
{
// This browser does not have the minimum set of APIs we need.
console.error('Browser not supported!');
let errDiv = angular.element("<p class='tqVidPlayerErrDiv'>Video player not supported in this browser</p>");
element.append(errDiv);
throw new Error('Video player not supported in this browser');
}
let videoTag = angular.element(element).find("video");
shaka.log.setLevel(shaka.log.DEBUG);
var player = new shaka.Player(videoTag);
player.addEventListener('error', errorEventHandler);
let srcUrl = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
console.log("Loading...", srcUrl);
loadPlayer(srcUrl);
async function loadPlayer(srcUrl)
{
console.log("loadPlayer()");
try
{
await player.load(srcUrl);
console.log("Video is loaded");
}
catch (e)
{
console.log("player.load failed: ", e);
}
};
// Error event handler
function errorEventHandler(evt)
{
console.log("Error Event ", evt.detail);
};
// Destructor. Unbind non-angular listeners
scope.$on('$destroy', function()
{
player.removeEventListener('error');
});
}
};
return directive;
});
Журналы ошибок
[Log] tqVideoPlayer link. nodename – "TQ-VIDEO-PLAYER" – k [<tq-video-player id="my-video">]
[Log] mathRound.install (shaka-player.compiled.debug.js, line 1670)
[Log] MediaSource.install (shaka-player.compiled.debug.js, line 1675)
[Info] Patching Safari 11 & 12 MSE bugs. (shaka-player.compiled.debug.js, line 1675)
[Info] Using Apple-prefixed EME (shaka-player.compiled.debug.js, line 1685)
[Log] PiPWebkit.install (shaka-player.compiled.debug.js, line 1777)
[Log] VideoPlayPromise.install (shaka-player.compiled.debug.js, line 1783)
[Info] Using native VTTCue. (shaka-player.compiled.debug.js, line 1785)
[Log] MediaCapabilities: install (shaka-player.compiled.debug.js, line 1671)
[Debug] EmeEncryptionSchemePolyfill: Waiting to detect encryptionScheme support. (shaka-player.compiled.debug.js, line 1882)
[Debug] McEncryptionSchemePolyfill: Waiting to detect encryptionScheme support. (shaka-player.compiled.debug.js, line 1888)
[Log] Loading... – "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" (tqVideoPlayer.js, line 61)
[Log] loadPlayer() (tqVideoPlayer.js, line 67)
[Warning] Factories requiring new has been deprecated and will be removed in v4.0 . We are currently at version v3.1 . Additional information: Factories should be plain functions (shaka-player.compiled.debug.js, line 181)
[Log] player.load failed: – TypeError: null is not an object (evaluating 'a.textTracks') — simple_text_displayer.js:37 (tqVideoPlayer.js, line 75)
TypeError: null is not an object (evaluating 'a.textTracks') — simple_text_displayer.js:37SimpleTextDisplayer — simple_text_displayer.js:37textDisplayFactory — player.js:4512callFactory — functional.js:110(anonymous function) — player.js:1494nextStep_ — generator_engine]:795next_ — generator_engine]:699next — generator_engine]:833(anonymous function) — execute_async_generator]:72initializePromisePromiseasyncExecutePromiseGenerator — execute_async_generator]:59asyncExecutePromiseGeneratorProgram — execute_async_generator]:117onInitializeMediaSourceEngine_ — player.js:1469(anonymous function) — player.js:563enterNode — player.js:602(anonymous function) — walker.js:342nextStep_ — generator_engine]:795next_ — generator_engine]:699next — generator_engine]:833(anonymous function) — execute_async_generator]:72initializePromisePromiseasyncExecutePromiseGenerator — execute_async_generator]:59asyncExecutePromiseGeneratorProgram — execute_async_generator]:117takeNextStep_ — walker.js:321doOneThing_ — walker.js:228(anonymous function) — walker.js:209nextStep_ — generator_engine]:795next_ — generator_engine]:699next — generator_engine]:833b — execute_async_generator]:52promiseReactionJob
[Error] Unhandled Promise Rejection: TypeError: this.target.addEventListener is not a function. (In 'this.target.addEventListener(b,c,this.options)', 'this.target.addEventListener' is undefined)
Binding_ (shaka-player.compiled.debug.js:367:297)
listen (shaka-player.compiled.debug.js:364:698)
onAttach_ (shaka-player.compiled.debug.js:845:273)
(anonymous function) (shaka-player.compiled.debug.js:824:356)
enterNode (shaka-player.compiled.debug.js:826:404)
(anonymous function) (shaka-player.compiled.debug.js:764:496)
nextStep_ (shaka-player.compiled.debug.js:37:114)
next_ (shaka-player.compiled.debug.js:33:244)
next (shaka-player.compiled.debug.js:38)
(anonymous function) (shaka-player.compiled.debug.js:39:235)
initializePromise
Promise
asyncExecutePromiseGenerator (shaka-player.compiled.debug.js:39:135)
asyncExecutePromiseGeneratorProgram (shaka-player.compiled.debug.js:39:448)
takeNextStep_ (shaka-player.compiled.debug.js:764:123)
doOneThing_ (shaka-player.compiled.debug.js:761:151)
(anonymous function) (shaka-player.compiled.debug.js:760:193)
nextStep_ (shaka-player.compiled.debug.js:37:114)
next_ (shaka-player.compiled.debug.js:33:244)
next (shaka-player.compiled.debug.js:38)
b (shaka-player.compiled.debug.js:39)
promiseReactionJob
Идентичные сбои в Chrome, Safari и Firefox в MacOS 10.12.
AngularJS 1.6.9 Shaka-Player 3.1.0
videoTag
является объектом jQuery, а не элементом HTML. Конструкторshaka.Player
, похоже, ожидает HTML-элемент. - person Jack A.   schedule 21.05.2021$(videoTag)[0]
вshaka.player()
, и видео теперь воспроизводится. Напишите ответ, и я его приму. - person Danny   schedule 21.05.2021