使用 DASH 直播时混淆 HTML 视频播放器行为

Question

我正在从 raspberry pi 相机向外部网站直播 MPEG DASH 视频。该网站仅包含一些基本的 HTML 标签。

  <script src="scriptFunctions.js"></script>
  <script src="scripts.js"></script>
</head>
<body>
  <main>
    <div id="videoArea"> </div>

显示流的视频元素使用 jQuery 和 AJAX 从 scripts.js 和 scriptFunctions.js 文件加载到 div。 scripts.js 文件看起来像这样

$(document).ready(function() {
    getElements();

scriptFunctions.js 文件包含 javascript 函数和 AJAX 请求

function getElements() {
  $.get("response.php?getInfo", function(info) {
    if(info == "something") { loadVideoPlayer(); }
  });
}

function loadVideoPlayer() {
  $("#videoArea").load("response.php?getVideo");
}

如果 GET 请求匹配 response.php 文件回显视频播放器

if(isset($_GET['getVideo'])) {
  echo '<video data-dashjs-player 
               controls autoplay
               src="http://<ip>/dash/streamtest/index.mpd"
        </video>';
}

问题是视频元素在页面刷新后随机不播放流。我试过 Firefox 和 Chrome，这两种浏览器都无法在页面刷新后播放内容。 Firefox 是唯一显示某种反馈的浏览器，如图 1 所示。Chrome 视频播放器变成空白。失败后检查视频元素源会显示 DASH 清单文件的地址。

如果我按 CTRL + SHIFT + 刷新，流将显示的可能性约为 70%，这适用于两种浏览器。但是，如果我保持 ctrl+shift+refresh-ing，我偶尔会遇到同样的错误。现在检查视频元素会显示一个 BLOB 源，如下图 2 所示。

在解决此问题时，我首先尝试将 <video> 元素直接移动到 HTML 文件，删除所有 AJAX 和 jQuery。这完全消除了两个（所有）浏览器的问题。然后我尝试将 $("#videoArea").load("response.php?getVideo"); 直接移动到 scritps.js 文件，而不是使用函数调用。这使得 Chrome 能够以大约 70% 的成功几率正常刷新页面，而 Firefox 仍然不能。我仍然可以按 CTRL+SHIFT+刷新页面。

更新： 上面看到的 firefox 视频播放器错误消息与控制台消息一起出现

HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource http://<ip>/dash/streamtest_low/index.mpd failed.

即使页面刷新成功，此错误也会在视频播放器中与控制台中的上述错误输出一起显示一瞬间。当流变得可观看时，跟随来自 Dash.js 的控制台输出

[10] EME detected on this user agent! (ProtectionModel_21Jan2015) 
[12] Streaming Initialized 
[16] Playback Initialized 
[16] [dash.js 2.6.7] MediaPlayer has been initialized 
[18] Converted primaryVideo1 to dash.js player and added content: http://<ip>/dash/streamtest_low/index.mpd 
[128] Parsing complete: ( xml2json: 26.0ms, objectiron: 12.0ms, total: 0.0380s) 
[132] SegmentTimeline detected using calculated Live Edge Time 
[132] MediaSource attached to element.  Waiting on open... 
[134] Manifest has been refreshed at Sun Apr 01 2018 16:25:24 GMT+0200 (Vest-Europa (sommertid))[1522592724.974]  
[164] MediaSource is open!

Answer 1

问题似乎是使用 http://cdn.dashjs.org/latest/jsdoc/index.html 中所述的 MediaPlayerFactory 设置引起的。切换到标准设置后，问题就消失了。添加两者的示例，取自他们的站点。

媒体播放器出厂设置

<body>
  <video data-dashjs-player autoplay
         src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
  </video>
</body>

标准设置

<body>
  <video id="videoPlayer" controls></video>
  <script>
        (function(){
            var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
            var player = dashjs.MediaPlayer().create();
            player.initialize(document.querySelector("#videoPlayer"), url, true);
        })();
    </script>
</body>

使用 DASH 直播时混淆 HTML 视频播放器行为

Confusing HTML video player behaviour while live streaming using DASH

html

ajax

jquery

mpeg-dash