Safari/Chrome浏览器无法在iPhone上播放超过16个视频

我们使用React.js和Onsen用户界面创建了第一个移动网站。该应用程序有一个章节列表屏幕，每个章节都有许多视频。在从列表中选择任何章节时，我们使用旋转木马逐个显示视频（每个旋转木马幻灯片使用HTML视频标记显示一个视频）

有些章节可能有20多个视频。所有视频均为mp4类型，大小约为40kb-3MB

在使用Safari或Chrome浏览器的iPhone上，在第16个视频（也就是第17个视频）之后，我会看到一个黑屏，并在播放按钮上划出一条斜线。浏览器控制台上没有错误或任何警告

下面是一个斜线穿过播放按钮的示例图像

一旦这个黑屏出现，它将开始出现在所有视频中

我有示例代码，你可以按任何顺序播放视频，只要你点击第17个视频，它就会给出一个错误

你好，世界！
.项目{
边框：1px纯黑；
}
.carousel control next、.carousel control prev{
背景：红色；
利润率：15px；
高度：40px；
}
.视频{
宽度：100%；
}
.伯爵{
文本对齐：居中；
保证金：10；
}
视频问题！

我认为浏览器过载，因为视频是缓存的，请尝试通过添加一点javascript使其具有一点动态性

我遇到了同样的问题。技巧似乎是替换嵌套的源标记，而不替换整个视频标记。在交换源以触发视频元素重新加载后，请记住对视频元素调用.load（）

实际上，我用不同大小的视频对它进行了测试，当我们尝试播放第17个视频时，它只会崩溃（可以播放并显示黑屏）。无论您以何种顺序播放，或者在播放之后，如果您使用js从DOM中删除视频标记，这都是可行的，但在我的例子中，我希望保留以前播放的视频的位置。