Skip to content

`dashjs` not defined error

Created by: rafa8626

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?