Question

我正在将此代码用于HTML5视频（用于设计背景）：

<video autoplay loop>
    <source src="video/hello.webm" type='video/webm;codecs="vp8, vorbis"' />
    <source src="video/hello.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
</video>

这似乎不适用于移动设备，但这完全没问题，但我想知道的是视频是否仍会加载（即使它没有显示）并在设备上使用带宽？在这种情况下，视频是3mb，如果它实际上没有在移动设备上加载，那就太棒了。但如果是的话，我该怎么办呢？

感谢。

Answer 1

尝试使用限制较少的type属性的示例，然后测试它是否适用于移动设备。例如。 type="video/mp4"。原生Android浏览器和iOS Safari应该可以毫无问题地播放mp4。

如果浏览器不了解媒体类型，它也不会下载任何内容。那会很疯狂，对吗？只需确保包含不同浏览器所需的所有类型。

请同时参阅the compatibility table at MDN。

Answer 2

如果浏览器不支持播放文件类型，则视频将不会下载。

始终包含width和height属性也是一个好主意。如果设置了高度和宽度，则在加载页面时会保留视频所需的空间。

但是，没有这些属性，浏览器不知道视频的大小，并且无法为其保留适当的空间。效果将是页面布局在加载期间（视频加载时）会发生变化。

对于不支持 <video>元素的浏览器，您还应在</video>和<video>标记之间插入文字内容。

关于MPEG-4/H.264的附注：Android 2.3浏览器目前需要特定处理来播放视频。

Firefox浏览器将在即将推出的版本中包含对某些平台的支持。

Firefox在Windows 7及更高版本21之后支持H.264。如果安装了相应的gstreamer插件，Firefox自26版以来就支持Linux上的H.264。对Firefox的部分支持是指OSX和OSX缺乏支持。一些Linux平台，对于 Android Firefox，它指的是无法实现硬件加速。

HTML5视频和移动设备

2 个答案: