更改源参数后，MP4在移动设备上不起作用

本文介绍了更改源参数后，MP4在移动设备上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个奇怪的问题.

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

On a website for my client, I'm showing some mp4 files using the HTML5 video element. The videos that are visible on the page while loading do show up on mobile devices without any problems.

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

When I try to change the source of a video element (after an AJAX request), the video element shows a black screen. The new video source I changed could be exactly the same as one that was already shown on page load, but after updating the src parameter it just won't show..

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

Already tried checking the mp4 encoding (which is H.264), the content-type in the server response-headers is correct (video/mp4) and the server seems to return "206 Partial Content". Also, gzip encoding for mp4 files is off.

如果我在Safari中检查远程调试器(在iPad上检查Safari)，则会收到错误消息尝试加载资源时发生错误".在下面找到响应标题:

If I check the remote debugger in Safari (inspecting Safari on an iPad), I get the error "An error occurred trying to load the resource". Below you find the response headers:

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

是否有人知道可能导致此问题的原因? 谢谢！

Does anyone have an idea what could be causing this issue? Thanks!

推荐答案

有关此文档的文档可能会有些混乱-似乎无法动态更改源( html.spec.whatwg/multipage/embedded-content.html ):

The documentation for this can be a bit confusing - it can look like it is not possible to dynamically change the source (html.spec.whatwg/multipage/embedded-content.html):

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

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.

但是，可以对其进行更改，并且以下代码段应在浏览器中可靠地运行-video.load()行是关键，因为它实际上确保插入了新的源.您可以通过注释掉这一行并观察差异来进行试验:

However, it can be changed and the code snippet below should work reliably cross browser - the video.load() line is key as it actually makes sure the new source is inserted. You can experiment by commenting out this line and seeing the difference:

var video = document.getElementById('video'); var source = document.createElement('source'); source.setAttribute('src', 'commondatastorage.googleapis/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'); video.appendChild(source); video.play(); function changeSource() { video.pause(); source.setAttribute('src', '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>

以上内容基于此处的出色答案: stackoverflow/a/18454389/334402

The above is based on the excellent answer here: stackoverflow/a/18454389/334402