iPad HTML 网页问题答案

【问题标题】：iPad HTML web page issueiPad HTML 网页问题
【发布时间】：2016-09-14 16:41:25
【问题描述】：

我正试图找出我们遇到的第 4 代 iPad 问题的根源。我们不断收到以下错误并且页面刷新，因此无法在 Mac 上的开发人员工具中进行调试：

“此网页出现问题，因此已重新加载”

该页面使用 fullpage.js 并呈现 22 个单独的 html5 (mp4) 视频，这些视频在每个完整页面/部分的背景中运行。

奇怪的是，如果我们将代码更改为仅渲染 15 个视频，页面就可以正常工作！

每个视频大小在 500KB 到 3MB 之间。视频总大小为 33MB。

它们是这样嵌入的：

<video id="video-transport" class="video-bg">
  <source src="videos/videoname.mp4" type="video/mp4">  
  <source src="videos/videoname.webm" type="video/webm">
  <p class="vjs-no-js"></p> 
</video>

有人对页面有什么问题有任何建议吗？我们是否超出了某种内存上限或页面大小。

有没有简单的调试方法？

谢谢，

菲尔

【问题讨论】：

“奇怪的是，如果我们将代码更改为仅渲染 15 个视频，页面就可以正常工作！” - 我无法想象你为什么会觉得这很奇怪。在一个页面上播放 22 个视频对于移动设备来说太疯狂了。
@Turnip 不仅如此，而且 33 MB 对于网站来说太疯狂了。
请明确一点，如果有任何区别，该网页是一种在线学习资源，只能通过封闭的高端无线网络获得，而不能通过互联网获得。

标签： javascript ios html ipad fullpage.js

【解决方案1】：

不知道为什么会坏，但是...

您是否尝试过对视频使用 preload property 以防止在页面加载时加载它们？ Related question

或者，如果这对您不起作用，您是否考虑过使用 fullpage.js lazy loading option 视频？

<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

【讨论】：

嗨@Alvaro 感谢这个延迟加载选项，这真的很有帮助，现在页面可以加载了。仅供参考，我刚刚编写了类似的代码来解决这个问题。但这更容易实现。我现在遇到的问题是，随着大量视频的加载，iPad 最终会因为内存不足而倒下？顺便说一句，不幸的是，您似乎无法在 iOS 上使用 preload 属性？
在页面/部分卸载后是否有简单的方法来销毁视频并释放内存。我尝试清除源 src 属性并删除当前未查看的视频标签中的所有源标签，但内存似乎没有释放？我还尝试在清除 src 后加载（）它们，但 jQuery 似乎抛出了“indexOf”（尽管这可能是我的代码中的内容）。