带有 HTML5 的 MPEG-DASH 自适应流在 Windows Chrome/Mozilla 中不起作用答案

【问题标题】：MPEG-DASH Adaptive Streaming with HTML5 is not working in windows Chrome/Mozilla带有 HTML5 的 MPEG-DASH 自适应流在 Windows Chrome/Mozilla 中不起作用
【发布时间】：2018-01-08 10:24:24
【问题描述】：

我是 MPEG-DASH 自适应流媒体的新手。我正在尝试在浏览器中使用dash.js 创建一个视频播放器。我参考了一些有用的MPEG-DASHAdaptive Streaming 文档。这些链接是

通过上述文件，我创建了一个示例 HTML 文件。

<!DOCTYPE html>
<html>
<head>
    <title>Adaptive Streaming in HTML5</title>
    <style>
        video {
        width: 640px;
        height: 360px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Adaptive Streaming with HTML5</h1>
        <video id="videoplayer" controls></video>
    <div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>    
    <!-- DASH-AVC/265 reference implementation -->
    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
    <script>
    <!--setup the video element and attach it to the Dash player-->
            (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>
</html>

但在chrome (Version 63.0.3239.132 (Official Build) (64-bit)) 和mozilla (version 57.0 (64-bit)) 上运行后，我看不到任何视频在此播放器中播放。这是输出截图

我正在尝试在我的浏览器上本地运行。会不会有什么问题？点击播放按钮后，我看不到任何视频。在Mozilla 浏览器中，我可以看到以下内容

[dash.js 2.6.4] MediaPlayer has been initialized

The character encoding of the HTML document was not declared. 
The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. 
The character encoding of the page must be declared in the document or in the transfer protocol.

但是脚本https://cdn.dashjs.org/latest/dash.all.min.js 也可以正常工作。此外，当我在 https://reference.dashif.org/dash.js/1.4.0/samples/dash-if-reference-player/index.html 视频播放器中添加 https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd URL 时，它工作正常。

实际上我在这里缺少什么？有什么建议或帮助吗？

【问题讨论】：

标签： javascript html azure video-streaming mpeg-dash

【解决方案1】：

属性值在 HTML 文档中区分大小写。

因此，如果您将 <video> 元素更改为：

<video id="videoPlayer" controls></video>

【讨论】：

【解决方案2】：

HTML5 自动支持 HLS，但 MPEG-DASH 不支持。这意味着某些浏览器或应用无法播放 MPEG-DASH 视频流，即使在非 Apple 设备上也是如此。

阅读HLS vs Dash in this link

【讨论】：