Windows Chrome/Firefox中MPEG-DASH自适应流HTML5播放器无法运行求助

让我们一步步排查你遇到的问题，先拆解几个关键错误点：

1. DOM元素ID大小写不匹配 #

这是导致播放器完全失效的核心原因！你HTML里的video元素id是videoplayer（全小写的p），但JavaScript代码里写的是#videoPlayer（大写的P）。浏览器的DOM选择器是大小写敏感的，找不到目标元素自然无法完成播放器与视频标签的绑定。

2. 缺少字符编码声明 #

Firefox提示的编码警告虽然不是播放失败的直接诱因，但会影响页面兼容性，必须在<head>中添加编码声明标签来修复。

3. 本地file://协议的跨域限制（Chrome专属） #

当你直接双击HTML文件用Chrome打开时，浏览器会用file://协议加载资源，这种情况下Chrome的同源策略会严格限制跨域请求（比如加载远程的MPD文件和视频分片）。解决办法是用本地HTTP服务器托管你的HTML文件，比如：

• 用Python 3执行：python -m http.server 8000
• 用Node.js的http-server包：先安装npm install -g http-server，再执行http-server
  之后在浏览器访问http://localhost:8000/你的文件名.html，就能正常加载跨域资源了。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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>
    <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
    <script>
        (function(){
            var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
            var player = dashjs.MediaPlayer().create();
            // 修正ID大小写，匹配HTML里的videoplayer
            player.initialize(document.querySelector("#videoplayer"), url, true);
        })();
    </script>
</body>
</html>

验证步骤 #

1. 替换代码后，用本地HTTP服务器启动（不要直接双击打开文件）
2. 访问对应localhost地址，点击播放按钮即可正常加载视频

内容的提问来源于stack exchange，提问作者user2986042