几个星期以来，我一直在开发一个基于 HTML5 的网站并遇到了一些主要的性能问题。这些问题当然取决于设计的需求，但是由于编码仍然非常精简并且只使用了几种媒体类型，我想我是否忽略了导致这些问题的某些东西。
先不说 – 我知道 Flash 网站可以轻松实现同样的效果，而且性能要好得多。我尝试仅使用 HTML(5) 获得类似的功能/设计，现在应该是可能的。
我说的是一个具有全屏视频背景 (HTML5 ) 且主要内容位于黑色背景的宽中间栏中的网站。内容可以包含 YouTube/Vimeo 样式大小的其他 HTML5 视频。这是 CPU 中途崩溃的地方，我在最近的 Mac Pro 上工作......
我将视频(从 480i 到 1080i 的任何大小)设置为随窗口的宽度和高度缩放。我还将它设置为 1080i 和 100% 的大小。我还添加了 JavaScript 以在某个较小的项目视频处于焦点时暂停背景。所有变化都会导致浏览器或站点情况(播放另一个视频)出现 Not Acceptable 缓慢。
有人告诉我this example会有最好的表现。 但我复制了数据速率和分辨率，但没有任何好处。
谁是网络视频性能方面的专家？
最佳答案
需要注意的事项:HTML5 视频和 Canvas 元素使用 GPU 的硬件加速，因此不仅依赖于浏览器，还依赖于运行浏览器的机器。例如。显卡较差的机器上的 Chrome 会比显卡高档的机器上的 Chrome 更差。您还必须考虑带宽和网络延迟。
我建议消除变量；首先在本地加载视频以切断网络，然后尝试使用不同硬件功能的不同机器，看看哪种效果最好。您也可以尝试不同的编码。 OGG 对比 m4v 对比 h264
最后我会看一下分辨率。小屏幕上的 1080i 可能真的不值得。
关于performance - HTML5 视频性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4511744/