ios - 连续播放 16 个视频后视频停止播放

Question

我正在开发部署到 iOS 和 Android 的 phonegap 应用程序。应用程序中有大量视频，一些包含在包中，其他则下载并存储在后台本地。连续播放 16 个视频后，第 17 个视频显示带有播放按钮的视频 div，其中有一条线穿过它。

我试过改变不同的东西，但没有成功。下面是一些生成视频 div 的代码:

        html += "<video id='popoverVideo' width='"+(globals.screenWidth-h)+"' height='"+(globals.screenHeight-h/2)+"' style='position:absolute;background:black;left:"+left+"px;top:"+top+"px;' controls='true' webkit-playsinline>"+
              "<source src='"+globals.wwwRootPath+video.path+"' type='video/mp4' codecs='avc1, mp4a'>"+
              "Your browser does not support the video tag."+
            "</video>";

该问题仅出现在iOS版本中。 Android 版本连续播放超过 16 个视频没有问题。

我还检查了与我合作的开发人员的另一个 phonegap 应用程序，他的视频代码与我的非常不同，他的应用程序有完全相同的问题，他的应用程序中只包含四个视频。你播放这四个视频 16 次，一次一个地循环播放，在第 17 次播放时，播放按钮上有一条线穿过它。

另一个重要说明，如果您将应用程序置于后台，然后将其带回前台，则会重置您的计数，您可以连续播放另外 16 个视频，甚至可以播放您通过播放按钮播放的第 17 个视频将自动开始播放应用程序的前景。也许我需要在视频停止时强制释放缓存？

Answer 1

确保您遵循移动设备的最佳做法:

4.8.10.16 Best practices for authors using media elements

Playing audio and video resources on small devices such as set-top boxes or mobile phones is often constrained by limited hardware resources in the device. For example, a device might only support three simultaneous videos. For this reason, it is a good practice to release resources held by media elements when they are done playing, either by being very careful about removing all references to the element and allowing it to be garbage collected, or, even better, by removing the element's src attribute and any source element descendants, and invoking the element's load() method.

这里有一些代码可以做到这一点:

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

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

    video.removeChild(child);
}

video.load();