HTML5视频性能

Question

几周以来,我一直在开发一个基于HTML5的网站,并遇到一些主要的性能问题.这些问题肯定取决于设计的要求,但由于编码仍然很薄,并且只使用少量媒体类型,我想知道是否忽略了导致这些问题的东西.

在您说出来之前 - 我知道Flash网站可以轻松地以相同的方式提高性能.我尝试使用HTML(5)获得类似的功能/设计,这应该是现在可能的.

我说的是一个带有全屏视频背景(HTML5)的网站,以及一个宽大的黑色背景中间栏的主要内容.内容可以包含YouTube/Vimeo风格大小的其他HTML5视频.这是CPU在中途发生恐慌的地方,我在最近的Mac Pro上工作......

我将视频(任意大小从480i到1080i)设置为与窗口的宽度和高度成比例.我还将它设置为1080i和100%的大小.我还添加了JavaScript,以便在其中一个较小的项目视频成为焦点时暂停背景.所有变化都会导致浏览器或站点情况出现无法接受的缓慢(另一个视频播放).

我被告知这个例子会有最好的表现.但我没有任何好处,重复数据速率和分辨率.

谁是网络视频表现专家？

Answer 1

需要注意的一些事项： HTML5 视频和画布元素使用 GPU 的硬件加速，因此不仅依赖于浏览器，还依赖于运行浏览器的计算机。例如，配备较差显卡的计算机上的 Chrome 会比配备高档显卡的计算机上的 Chrome 差。您还必须考虑带宽和网络延迟。

我建议消除变量；首先在本地加载视频以切断网络，然后在不同硬件功能的不同机器上尝试，看看哪种效果最好。您也可以尝试不同的编码。OGG vs m4v vs h264

最后我会看一下决议。小屏幕上的 1080i 可能并不值得。