数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 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 格式的视频被忽略。
365 次查看
