Question

我正在通过覆盆子pi相机将MPEG DASH视频直播到外部网站。该网站仅包含一些基本的HTML标记。

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

使用来自scripts.js和scriptFunctions.js文件的jQuery和AJAX将显示流的视频元素加载到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 + Refresh，则流将显示的概率为~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设置引起的。切换到标准设置后，问题消失了。从他们的网站上添加两者的例子。

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视频播放器的行为

1 个答案: