使用 HTML5 视频时常用的视频格式
<video> HTML 元素将支持视频播放的媒体播放器嵌入到文档中。您也可以将 <video> 用于音频内容，但 <audio> 元素可能提供更合适的用户体验。
HTML5 <video> 标签是一个很棒的补充。它无需依赖 Flash 之类的插件，而是可以在所有最新的浏览器中本地播放视频。它使不支持 Flash 的硬件可以访问网络视频。此外，它使以前无法在网络上播放的编解码器成为可能。
让我们进入文章，讨论使用 HTML5 视频时常用的视频格式。
什么是网络格式?
有些浏览器可以本地播放三种不同的视频格式。不幸的是，并不是所有浏览器都支持任何格式，因此，如果您想要有用的 HTML5 视频支持，则必须实现至少两种不同的格式。您至少需要 MP4 + H.264，以及 AAC 或 MP3。在 Safari、Chrome 和 IE9(Vista/Windows 7)中，MP4 视频可以原生播放。
对于其他浏览器，请使用 WebM + VP8 或 Ogg + Theora 和 Vorbis 音频。Ogg 与 Firefox(3.5+)、Chrome(3+)和 Opera(10.54+)兼容，而 WebM 与 Firefox(4+)、Chrome(6+ 或 Chromium)和 Opera(10.60+)兼容。
让我们来看看浏览器对不同视频格式的支持 −
Browser |
MP4 |
WebM |
Ogg |
|---|---|---|---|
| Chrome | YES |
YES |
YES |
| Safari | YES |
YES |
NO |
| Firefox | YES |
YES |
YES |
| Opera | YES |
YES |
YES |
如何使用 HTML5 视频格式
在 HTML 5 出现之前，没有成熟的框架可以在您的网站上显示视频。您可以选择使用 HTML5 视频将视频元素引入浏览器。通过替换对象的某些组件，可以增加观看者的注意力和兴奋感。随着这项新技术的发展，无需使用任何插件即可在线显示视频。
以下是 HTML 视频及其媒体类型的表格。
文件格式 |
媒体类型 |
|---|---|
| MP4 | Video/mp4 |
| WebM | Video/webm |
| Ogg | Video/ogg |
为了在使用 HTML5 视频时清楚了解常用的视频格式。让我们看看以下示例。
示例
在下面的示例中，我们播放的是 Ogg 视频格式。
<!DOCTYPE html>
<html>
<body>
<h1>Using Ogg format</h1>
<video width="320" height="240" autoplay>
<source src="https://file-examples.com/storage/fe8c7eef0c6364f6c9504cc/2018/04/file_example_OGG_480_1_7mg.ogg" type="video/ogg">
</video>
</body>
</html>
输出
当脚本执行时，它将生成一个输出，其中包含一个上传到网页的视频，该视频为 Ogg 格式并具有自动播放属性，这会导致视频在页面加载时自动启动。
示例
考虑以下示例，我们使用 MP4 格式。
<!DOCTYPE html>
<html>
<body>
<h1>Using MP4 format</h1>
<video width="320" height="240" autoplay>
<source src="https://static.videezy.com/system/resources/previews/000/055/884/original/201118-CountdownChristmas.mp4" type="video/mp4">
</video>
</body>
</html>
输出
运行上述脚本后，它将生成一个输出，其中包含一个上传到网页的 MP4 格式的视频，该视频具有自动播放属性，这会导致视频在页面加载时自动启动。
示例
查看以下示例，其中我们使用多个源元素，浏览器将使用第一个识别的格式 −
如果任何一种格式加载失败，这种情况很有用，另一种格式将作为备份。
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</body>
</html>
输出
当脚本执行时，它将生成一个由网页上以 MP4 格式显示的视频组成的输出，而 Ogg 格式的视频则留在后面，因为浏览器首先识别 MP4 格式。
