Question

我是MPEG-DASH自适应流媒体的新手。我正在尝试在浏览器中创建一个dash.js的视频播放器。我引用了一些有用的MPEG-DASH Adaptive 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网址时，它运行正常。

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

Answer 1

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

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

，这将有效

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

Answer 2

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

阅读HLS vs Dash in this link

使用HTML5的MPEG-DASH自适应流媒体在Windows Chrome / Mozilla

2 个答案: