使用 JavaScript 前进到 Dash.js 中的下一个视频

Question

我在 Wowza Streaming Engine 论坛上找到了一个解决方法，该论坛展示了如何使用 JavaScript 前进到文件路径列表中的下一个视频以用于 m3u8 播放列表，该方法使用我改编的方法工作对于我的 Rails 观点：

<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>

它在 Safari 和 iOS 设备上与 m3u8 一起正常工作，并且它一直工作到 Chrome 上的一个点，它使用 Dash.js 作为播放器：

               <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>

Javascript 应该前进到列表中的下一个文件，确实如此，但我在控制台中收到此错误：

[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

没有其他细节。从控制台的“网络”选项卡中，我发现它确实在连接，并且在播放器中设置了正确的（可解析且有效的）URL，但是与第一个清单不同的是，它显示了类型"media" 而不是 "xhr" 并且发起者来自我的应用程序，而不是 Dash.js:

所以，基本上，我的问题是我从哪里开始更改我的请求方法以强制 dash.js 进行调用 and/or 发出我当前的请求（来自我的 Javascript page's head) 做一个适当的 XHR，这大概是我可以收集哪些数据的瓶颈？

Answer 1

我认为您运行遇到的问题是 dash.js 无法通过将视频的 src 元素设置为 mpd 文件来工作。相反，您必须初始化 dash.js 播放器并将其指向视频元素。

您可以查看 Getting Started section of the dash.js Readme. Dash.js uses Media Source Extensions 播放视频，以便它可以执行必要的解密和比特率切换。这意味着 video.src 属性被设置为一个特殊的 blob URL，您在服务器端不会知道它。

tl；博士；版本是你需要运行这样的代码：

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

您还应该注意 Dash.js 应该可以在桌面版 Safari 上运行。

使用 JavaScript 前进到 Dash.js 中的下一个视频

Using JavaScript to advance to next video in Dash.js

javascript

xmlhttprequest

video-streaming

dash.js