更改源参数后，MP4无法在移动设备上工作

Question

我有一个奇怪的问题。

在我客户的一个网站上，我展示了一些使用HTML5视频元素的mp4文件。加载时在页面上可见的视频确实会显示在移动设备上，没有任何问题。

当我尝试更改视频元素的来源时(在AJAX请求之后(，视频元素会显示黑屏。我更改的新视频源可能与页面加载中已经显示的视频源完全相同，但在更新src参数后，它就不会显示了。。

已经尝试检查mp4编码(即H.264(，服务器响应标头中的内容类型正确(视频/mp4(，并且服务器似乎返回"206部分内容"。此外，mp4文件的gzip编码是关闭的。

如果我在Safari中检查远程调试器(在iPad上检查Safari(，我会得到错误"尝试加载资源时出错"。下面是响应标题：

HTTP/1.1 206 Partial Content
Content-Type: video/mp4
ETag: "23f72-5a4561b99803e"
Last-Modified: Tue, 28 Apr 2020 09:03:40 GMT
Content-Range: bytes 0-147313/147314
Accept-Ranges: bytes
Date: Wed, 29 Apr 2020 05:13:12 GMT
Content-Length: 147314
Keep-Alive: timeout=5, max=84
Connection: Keep-Alive
Server: Apache

有人知道是什么导致了这个问题吗？谢谢

Answer 1

这方面的文档可能有点混乱——看起来不可能动态更改源(https://html.spec.whatwg.org/multipage/embedded-content.html)：

当源元素已插入视频或音频元素时，动态修改该元素及其属性将无效。要更改正在播放的内容，只需直接使用media元素上的src属性，可以使用canPlayType((方法从可用资源中进行选择。通常，在解析文档后手动操作源元素是一种不必要的复杂方法。

但是，它可以更改，下面的代码片段应该可以在跨浏览器中可靠地工作-video.load((行是关键，因为它实际上可以确保插入新的源代码。你可以通过评论这一行来进行实验，看看区别：

var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4');
video.appendChild(source);
video.play();
function changeSource() {  
video.pause();
source.setAttribute('src', 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'); 
video.load();  //This step is key
video.play();
}

<h1>Video source change test</h1>
<p>
<button id="sourceButtom" onclick="changeSource()">Click me to change the video source.</button>
<p>
<video id="video" width="320" controls height="240"></video>

以上是基于这里的优秀答案：https://stackoverflow.com/a/18454389/334402