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

【问题标题】：Confusing HTML video player behaviour while live streaming using DASH使用 DASH 进行直播时混淆 HTML 视频播放器行为
【发布时间】：2018-03-31 14:38:53
【问题描述】：

我正在将 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 文件包含带有 AJAX 请求的 javascript 函数

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!

【问题讨论】：

标签： jquery html ajax mpeg-dash

【解决方案1】：

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

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>

【讨论】：