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应用程序，他的视频代码与我的非常不同，他的应用程序有完全相同的问题，他只有四个视频包含在应用程序中。你可以播放这四个视频，但是一次一个地循环播放这些视频，并且在第17个播放时，播放按钮并通过它进行播放。

另一个重要的注意事项，如果您将应用程序设置为背景，然后将其重新置于前台，重置您的计数，您可以连续播放另外16个视频，甚至是您通过播放按钮播放的第17个视频会自动开始玩应用程序是有前景的。也许我需要在视频停止时强制释放缓存？

Answer 1

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

<强> 4.8.10.16 Best practices for authors using media elements

在小型设备（如机顶盒）上播放音频和视频资源盒子或移动电话通常受到有限硬件的限制设备中的资源。例如，设备可能只支持三个同步视频。因此，这是一个很好的做法释放媒体元素完成后播放的资源，通过非常小心删除所有引用元素并允许它被垃圾收集，或者更好，通过删除元素的src属性和任何源元素后代，并调用元素的load（）方法。

这里有一些代码可以执行此操作：

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

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

    video.removeChild(child);
}

video.load();

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

1 个答案: