Question

我们希望使用<video>标记播放带有音频的视频。

使用html5在大多数现代浏览器中可以播放哪些视频格式和视频及音频编解码器组合？

例如，文件可以采用Quicktime容器格式吗？他们可以在Quicktime内部使用h.264和MP3，还能在大多数浏览器中播放吗？他们可以在Quicktime内部使用h.264和AAC，还能在大多数浏览器中播放吗？

我们不关心比版本11更早的Internet Explorer。我们非常关心当前版本的Chrome，Firefox和Safari，包括他们的移动版本。

修改因此，根据@Widor和http://caniuse.com/#feat=video的评论，我可以使用video标记，但是，该网页没有说明我可以将什么类型的视频添加到视频标记中。

Answer 1

容器：MP4，视频编解码器：H.264，audo编解码器：AAC。如果您希望每个人都能够播放视频，请使用大约640x360（“360p”）的分辨率和大约800kbps的比特率，但这实际上取决于您的源输入。通常不要使用高于1280x720的分辨率或高于2500kbps的比特率，除非你有一个质量较低的后备选项。

您需要确保MP4是“流式优化”或“渐进式下载就绪”，这意味着MOOV标头信息位于前面，视频可以立即开始播放。 MP4将涵盖大多数移动/桌面浏览器，但您可能希望为某些版本的Firefox + Opera提供WebM。

这是一个包含mp4和webm后备的示例标记，如果浏览器不支持html5（某些移动设备），则会直接链接回退：

<div style="width:640px; height: 360px; position: relative">
  <video width="100%" height="100%" controls="controls" poster="http://url/of/my-preview.jpg">
    <source src="http://url/of/my-video.mp4" type="video/mp4; codecs='avc1.64001F, mp4a.40.5'">
    <source src="http://url/of/my-video.webm" type="codecs=vp8,vorbis">
    <a href="http://url/of/my-video.mp4">
      <img src="http://url/of/my-preview.jpg" alt="Click to play video because your browser doesn't support HTML5 video" style="width:100%; height: 100%">
    </a>
  </video>
</div>

如果您需要将视频转换为MP4，请尝试使用优秀工具Handbrake 此外，http://diveintohtml5.info/video.html是一个很好的资源。

在大多数使用html5的现代浏览器中，可以播放哪些视频格式和视频和音频编解码器组合？

1 个答案: