Question

我正在一个有大量mp4视频的网站上工作。连续播放16个视频后，下一个视频会显示带有播放按钮的视频div，并带有一条直线。该问题仅发生在iOS版本中。 Android版本播放超过16个视频没有问题。

下面是一些非常简单的代码，因此您可以理解问题不是来自我的代码。如果你能告诉我如何通过html，js或php解决问题。

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<p id="demo"></p>
<script>
var myVideos = "";
var i;
for (i = 0; i < 20; i++) {
    myVideos += "<video controls muted loop playsinline width='400' src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4'></video><br>";
}
document.getElementById("demo").innerHTML = myVideos;
</script>
</body>
</html>

Here is what my iphone shows

Answer 1

我已经在你的其他帖子中回答了这个问题，但是请将其放在这里以防其他人被删除，因为这是原件。

这是由于移动设备上的硬件限制造成的。播放完成后，您需要清除视频资源。

这样的事情应该有效。

var video = document.getElementById('videoID');
var child = null;

while(child = video.firstChild) {
    if(child.nodeName === 'SOURCE') {
       child.src = '';
   }

   video.removeChild(child);
}

video.load();

查看本网站了解更多信息.. https://dev.w3.org/html5/spec-author-view/video.html

为什么iOS在16个视频后停止播放，然后在html上显示黑色？

1 个答案: