使用 html5 可以在大多数现代浏览器中播放哪些视频格式和视频和音频编解码器的组合?
What combinations of video formats and video and audio codecs can be played in most modern browsers using html5?
我们想使用 <video>
标签播放带音频的视频。
在使用 html5 的大多数现代浏览器中可以播放哪些视频格式和视频和音频编解码器的组合?
例如,文件可以是Quicktime容器格式吗?
它们可以是 Quicktime 中的 h.264 和 MP3 并且仍然可以在大多数浏览器中播放吗?
它们可以是 Quicktime 中的 h.264 和 AAC 并且仍然可以在大多数浏览器中播放吗?
我们不关心版本低于 11 的 Internet Explorer。
我们确实关心 Chrome、Firefox 和 Safari 的当前版本,包括它们的移动版本。
编辑
因此,根据@Widor 和 http://caniuse.com/#feat=video 的评论,我可以使用 video
标签,但是,该页面没有说明我可以将哪种视频放入视频标签。
容器:MP4,视频编解码器:H.264,音频编解码器:AAC。如果您希望每个人都能播放视频,请使用 640x360(“360p”)左右的分辨率和 800kbps 左右的比特率,但这实际上取决于您的源输入。通常不要使用高于 1280x720 的分辨率或高于 2500kbps 的比特率,除非您有较低质量的后备选项。
您需要确定MP4是"streaming optimized"或"progressive download ready",这意味着MOOV头信息在前面,视频可以立即开始播放。 MP4 将涵盖大多数 mobile/desktop 浏览器,但您可能还想为某些版本的 Firefox + Opera 提供 WebM。
这是一个包含 mp4 和 webm 回退的示例标签,如果浏览器不支持 html5(某些移动设备),则直接 link 回退:
<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 是一个很好的资源。
我们想使用 <video>
标签播放带音频的视频。
在使用 html5 的大多数现代浏览器中可以播放哪些视频格式和视频和音频编解码器的组合?
例如,文件可以是Quicktime容器格式吗? 它们可以是 Quicktime 中的 h.264 和 MP3 并且仍然可以在大多数浏览器中播放吗? 它们可以是 Quicktime 中的 h.264 和 AAC 并且仍然可以在大多数浏览器中播放吗?
我们不关心版本低于 11 的 Internet Explorer。 我们确实关心 Chrome、Firefox 和 Safari 的当前版本,包括它们的移动版本。
编辑
因此,根据@Widor 和 http://caniuse.com/#feat=video 的评论,我可以使用 video
标签,但是,该页面没有说明我可以将哪种视频放入视频标签。
容器:MP4,视频编解码器:H.264,音频编解码器:AAC。如果您希望每个人都能播放视频,请使用 640x360(“360p”)左右的分辨率和 800kbps 左右的比特率,但这实际上取决于您的源输入。通常不要使用高于 1280x720 的分辨率或高于 2500kbps 的比特率,除非您有较低质量的后备选项。
您需要确定MP4是"streaming optimized"或"progressive download ready",这意味着MOOV头信息在前面,视频可以立即开始播放。 MP4 将涵盖大多数 mobile/desktop 浏览器,但您可能还想为某些版本的 Firefox + Opera 提供 WebM。
这是一个包含 mp4 和 webm 回退的示例标签,如果浏览器不支持 html5(某些移动设备),则直接 link 回退:
<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 是一个很好的资源。