`dashjs` not defined error #1680

rafa8626 · 2016-12-02T15:57:10Z

I have to following HTML files:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <style>
        .btn {
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px;
            text-decoration: none;
            color: black;
            border: 2px solid black;
            border-radius: 4px;
        }
        .btn:hover {
            background-color: #aad6e5;
        }
    </style>
</head>
<body>
    <section>
        <a class="btn" id="a-dynamic-dash" href="video.html">Dynamic with dash</a>
        <a class="btn" id="a-nondynamic-dash" href="video.html">Non Dynamic with dash</a>
    </section>
    <div id="content-dynamic"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('#a-dynamic-dash').click(function(e) {
                $('#content-dynamic').load($(this).attr('href'), function() {
                    initDash();
                });
    
                e.preventDefault();
                e.stopPropagation();
            });
    
            $('#a-nondynamic-dash').click(function(e) {
                initDash();
                e.preventDefault();
                e.stopPropagation();
            });
        });
    
        function initDash() { // init mediaelement
            $.getScript( "https://cdn.dashjs.org/latest/dash.all.min.js", function() {
                var player = dashjs.MediaPlayer().create();
                console.log(player);
            });
        }
    </script>
</body>
</html>

video.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <style>
        .btn {
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px;
            text-decoration: none;
            color: black;
            border: 2px solid black;
            border-radius: 4px;
        }
        .btn:hover {
            background-color: #aad6e5;
        }
    </style>
</head>
<body>
<section>
    <h1>Video</h1>
    <div><a class="btn" href="test.html">Back</a></div>
    <video muted controls preload="none" width="528px" height="297px">
        <source src="http://stijnheylen.com/mediaElementTest/video/animated-font/animated-font.mpd" type="application/dash+xml">
        <source src="http://stijnheylen.com/mediaElementTest/video/animated-font/animated-font.mp4" type="video/mp4">
    </video>
</section>
</body>
</html>

If I click the Non Dynamic with dash button I can see the console message; but if I click the other button I receive this error:
MediaPlayer.js:1855 Uncaught ReferenceError: dashjs is not defined

Interesting thing is that if I try another library using the exact same files and change what I expect to see once the script is loaded there are no issues. Example, if I change the initDash() to this:

function initDash() {
      $.getScript( "https://cdn.jsdelivr.net/hls.js/latest/hls.min.js", function() {
            var player = new Hls();
            console.log(player);
      });
}

I can see properly the console when using the Dynamic button. Is there something I am missing?

The text was updated successfully, but these errors were encountered:

davemevans · 2016-12-02T16:42:26Z

~~Whilst I hate making comments like this, this WFM in Chrome 55 on Win 7 (ie I don't get that console error)~~

I have to apologise as I realised that I had clicked the working test case first which caused the library to be loaded into the context when I subsequently tried the other button.

rafa8626 · 2016-12-02T17:04:14Z

I experienced this on mac OS sierra using Chrome v54.0.2840.98 and also FF v50.0.2

rafa8626 · 2016-12-02T18:06:44Z

Another issue experienced the same with OSX El Capitan using Chrome(Version 55.0.2883.75), Firefox(50.0.2) and Safari.

dsparacio · 2016-12-02T18:16:06Z

If you remove all the jquery stuff around the dash.js creations does it fix it

$.getScript( "https://cdn.dashjs.org/latest/dash.all.min.js", function() {
var player = dashjs.MediaPlayer().create();

rafa8626 · 2016-12-02T18:18:35Z

@AkamaiDASH Yeah that's basically using a non-AJAX approach like pressing the second button, but I need to bring markup from AJAX to insert the video tag first and then load the library to continue with other operations. And that's where it fails. But compared to other libraries, this one has something that is not being loaded for some reason if I try to load it once an AJAX request has been successful

dsparacio · 2016-12-02T18:21:41Z

Thanks , I am trying to verify this issue within a certain scope (Jquery) VS wide spread issue since we are trying to freeze code and get RC1 out today.

rafa8626 · 2016-12-02T18:22:48Z

I see. Thanks for looking at this. Keep me posted about your findings please

JibberJim · 2016-12-02T19:26:35Z

Unfortunately this is a JQuery issue, as per the JQuery docs, the callback on getScript fires only after the script is loaded, not after it has executed https://api.jquery.com/jquery.getscript/ says "The callback is fired once the script has been loaded but not necessarily executed." I've never been sure of the utility of such a thing, especially as it's not determinate if it's executed or not. Changing initDash to something more like: function initDash() { // init mediaelement var s=document.createElement('script'); s.type="text/javascript"; s.onload=function() { var player = dashjs.MediaPlayer().create(); console.log(player); } s.src="https://cdn.dashjs.org/latest/dash.all.min.js"; document.head.appendChild(s); }

…

On Fri, Dec 2, 2016 at 6:22 PM, Rafael Miranda ***@***.***> wrote: I see. Thanks for looking at this. Keep me posted about your findings please — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1680 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFLujmNzfo-3d_F3Lym-1iwI4PNTp8KOks5rEGH7gaJpZM4LCstE> .

rafa8626 · 2016-12-02T19:41:11Z

The thing is I tried using vanilla JavaScript to perform an AJAX request and do what you said and still experienced the same issue. I used jQuery to simplify the HTML

JibberJim · 2016-12-02T19:47:10Z

Can you show the non-JQuery code you used, as the JQuery code makes no attempt to have the script available when executing the callback, the onload method I used does. The JQuery method is wrong to be used that way. There is another way that the code can fail even with onload - which is because dashjs is only added to the global scope if the document is already loaded, with the above simple documents that should be the case, but in a more realistic scenario it wouldn't necessarily be. So if the onload callback executed while the page was still loading that could happen. Such a case can be protected against by only loading the script once the document is already loaded.

…

On Fri, Dec 2, 2016 at 7:41 PM, Rafael Miranda ***@***.***> wrote: The thing is I tried using vanilla JavaScript to perform an AJAX request and do what you said and still experienced the same issue. I used jQuery to simplify the HTML — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1680 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFLujvdt8KRfKOhGZUXWLXPy9hhK6yUmks5rEHRagaJpZM4LCstE> .

davemevans · 2016-12-02T19:54:07Z

Further to this, you don't even need to call dashjs.MediaPlayer.create once you have the script loaded properly since you have added <source src="http://stijnheylen.com/mediaElementTest/video/animated-font/animated-font.mpd" type="application/dash+xml">. This will cause the MediaPlayer will be created automatically by the MediaPlayerFactory.

rafa8626 · 2016-12-02T20:04:10Z

Here's the link where I see the issue http://stijnheylen.com/mediaElementTest/

rafa8626 · 2016-12-02T20:07:13Z

The implementation of Dash is inside te mediaelement.js file

JibberJim · 2016-12-02T21:30:23Z

Thanks, so that does show a dashjs bug. the detectProtection function in MediaPlayer.js introduced here: cb90350 Doesn't work in the case where there are video elements being auto-created, because the dash.js global is created after the auto-creation attempt. In your case, you saw the error but that was only after the error above comes out - which is why your reduced test case wasn't there. So this is a real dash.js bug that will need fixing before release, unfortunately it's an area that I'm not familar with - creating the dashjs up front before the createAll will presumably be the best fix (it's more reliable anyway) For you can just do the skipAutoCreate to get the same feature. Cheers,

…

On Fri, Dec 2, 2016 at 8:04 PM, Rafael Miranda ***@***.***> wrote: Here's the link where I see the issue http://stijnheylen.com/ mediaElementTest/ — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1680 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFLujmspq95wmPx4kvK09QpDdSzBlOqlks5rEHm9gaJpZM4LCstE> .

davemevans · 2016-12-02T21:35:17Z

Related: #1496

rafa8626 · 2016-12-02T22:03:59Z

Thanks for looking at this. I'll check the approach you proposed and keep you posted. Please keep me posted as we'll about fixing this; this is a key element in the project and it will be really nice to get it sorted out to cover most of the known scenarios

rafa8626 · 2016-12-09T01:43:38Z

Thanks for fixing this

LloydW93 added Pri-Critical Regression labels Dec 6, 2016

JontyUsborne mentioned this issue Dec 8, 2016

Fix #1680: Prevent MediaPlayerFactory creating elements if dashjs hasn't loaded #1694

Merged

dsparacio closed this as completed in b268107 Dec 8, 2016

JontyUsborne mentioned this issue Jan 10, 2017

Fix #1722: Wait for dashjs before creating element(s) if loaded asynchronously #1736

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`dashjs` not defined error #1680

`dashjs` not defined error #1680

rafa8626 commented Dec 2, 2016

davemevans commented Dec 2, 2016 •

edited

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

dsparacio commented Dec 2, 2016

rafa8626 commented Dec 2, 2016 •

edited

dsparacio commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

davemevans commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

davemevans commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 9, 2016

dashjs not defined error #1680

dashjs not defined error #1680

Comments

rafa8626 commented Dec 2, 2016

davemevans commented Dec 2, 2016 • edited

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

dsparacio commented Dec 2, 2016

rafa8626 commented Dec 2, 2016 • edited

dsparacio commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

davemevans commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

JibberJim commented Dec 2, 2016 via email

davemevans commented Dec 2, 2016

rafa8626 commented Dec 2, 2016

rafa8626 commented Dec 9, 2016

`dashjs` not defined error #1680

`dashjs` not defined error #1680

davemevans commented Dec 2, 2016 •

edited

rafa8626 commented Dec 2, 2016 •

edited