javascriptxmlhttprequestvideo-streamingdash.js

Using JavaScript to advance to next video in Dash.js


I found a workaround on the Wowza Streaming Engine forum that showed how to use JavaScript to advance to the next video in a list of filepaths for use with an m3u8 playlist, which worked using this method I adapted for my Rails view:

<script>
    <% string = "" %>
    <% request = HTTParty.get("http://localhost:4567/playlist") %>
    <% playlist = JSON.parse(request.body) %>
    <% vids = playlist.each do |vid| %>
    <% if vid['id'] %>

        <% string = string + "" + vid['filename'] +"," %>

    <% end %>
    <% end %>

var videos="<%= string %>".split(",");
next=-1;    
    function end(e)
    {
    var video = document.getElementById("video1");

    if (++next==videos.length)
        return;

    <% if browser.safari? or browser.ios? %>
    video.src = "http://IP:1935/"+videos[next]+"/playlist.m3u8";
    <% elsif browser.chrome? %>
    video.src = "http://IP:1935/"+videos[next]+"/manifest.mpd";
    <% end %>
    video.load();
    video.play();
    }
</script>

It works properly with m3u8 on Safari and iOS devices, and it works up until a point on Chrome, which uses Dash.js as the player:

               <video class="dashjs-player" preload="true" width="100%" height="auto" controls autoplay onended="end(event)" id="video1" src="http://IP:1935/vod/mp4:Sample.mp4/manifest.mpd" type="application/dash+xml" >

               </video>

The Javascript is supposed to advance to the next file in the list, which it does, but I receive this error in my console:

[video] start 
dash.all.js:11 [audio] start 
dash.all.js:11 Video Element Error: MEDIA_ERR_SRC_NOT_SUPPORTED 
dash.all.js:11 [video] stop 
dash.all.js:11 [audio] stop 
dash.all.js:11 Video Element Error: MEDIA_ERR_SRC_NOT_SUPPORTED 

with no other detail. From the Network tab in the console, I found that it was, indeed, connecting, and in player, the correct (resolvable, and valid) URL was set, but that, unlike the first manifest, it showed the type "media" rather than "xhr" and that the initiator was from my app, rather than Dash.js:

of type "media" from index rather than XML request via dash.js

So, basically, my question is where do I start changing my request method to force dash.js to make the call and/or make my current request (from the Javascript in my page's head) do a proper XHR, which is presumably the chokepoint from what data I could collect?


Solution

  • I think the problem you're running into is that dash.js doesn't work by setting the src element of a video to the mpd file. Instead you have to initialize the dash.js player and point it at the Video element.

    You can check out the Getting Started section of the dash.js Readme. Dash.js uses Media Source Extensions to play the video so that it can perform the necessary decryption and bit rate switching. This means that the video.src attribute gets set to a special blob URL which you won't know on the server side.

    The tl;dr; version is that you need to run code like this:

    (function(){
                var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd";
                var player = MediaPlayer().create(); 
                player.initialize(document.querySelector(".dashjs-player"), url, true);
            })();
    

    You should also note that Dash.js should work on Safari for desktop.