Wrap shaka-player in AngularJS directive not working (this.target.addEventListener is not a function)

Question

I want to wrap the shaka-player example in an AngularJS directive.

The example player works fine on its own and can play the MPEG-DASH version of Big Buck Bunny hosted on Akamai's CDN.

However, when trying to use shaka-player within an AngularJS directive, player.load(url) fails with this.target.addEventListener is not a function.

It also reports TypeError: Cannot read property 'textTracks' of null. (Depending on the browser, the order of these errors is sometimes reversed)

I don't know why it works standalone but not in a AngularJS directive...

The HTML fragment for the directive looks like:

<tq-video-player
  tqsrc="source"
  poster="somePicture"
  id="my-video"
  width="640"
  height="360">
</tq-video-player>

The directive code itself is nearly copy-paste from the example code. (I've also tried several variations to handle the promise instead of the async function. All have the same error.

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;
});

Error Logs

[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

Identical failures on Chrome, Safari, and Firefox on MacOS 10.12.

AngularJS 1.6.9 Shaka-Player 3.1.0

Answer 1

The angular.element function returns a jQuery element, as does the jQuery find function. Consequently your videoTag variable refers to a jQuery object.

On the other hand, the shaka.Player constructor expects an HTMLMediaElement. So passing videoTag[0] should work.