使用 HTML5 视频时的常用视频格式
<video> HTML 元素将支持视频播放的多媒体播放器嵌入到文档中。您也可以将 <video> 用于音频内容,但 <audio> 元素可能会提供更合适的用户体验。
HTML5 <video> 标签是一个极好的补充。它使得可以在所有最新的浏览器中本地播放视频,而无需依赖 Flash 等插件。它使硬件能够访问不支持 Flash 的网络视频。此外,它还使以前无法在网络上播放的编解码器成为可能。
让我们深入本文,进一步讨论使用 HTML5 视频时常用的视频格式。
什么是 Web 格式?
有三种不同的视频格式,某些浏览器可以原生播放。不幸的是,并非所有浏览器都支持所有格式,因此,如果您希望获得有用的 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+)兼容。
让我们看看不同视频格式的浏览器支持情况 -
浏览器 |
MP4 |
WebM |
Ogg |
|---|---|---|---|
| Chrome | 是 |
是 |
是 |
| Safari | 是 |
是 |
否 |
| Firefox | 是 |
是 |
是 |
| Opera | 是 |
是 |
是 |
如何使用 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 格式显示的视频,因为浏览器首先识别 MP4 格式,所以 Ogg 格式的视频将被忽略。
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP