使用 HTML5 视频时常用的视频格式

javascriptweb developmentfront end scripts更新于 2024/5/16 17:19:00

HTML5

让我们进入文章，讨论使用 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 视频格式。

Using Ogg format

输出

当脚本执行时，它将生成一个输出，其中包含一个上传到网页的视频，该视频为 Ogg 格式并具有自动播放属性，这会导致视频在页面加载时自动启动。

示例

考虑以下示例，我们使用 MP4 格式。

Using MP4 format

输出

运行上述脚本后，它将生成一个输出，其中包含一个上传到网页的 MP4 格式的视频，该视频具有自动播放属性，这会导致视频在页面加载时自动启动。

示例

查看以下示例，其中我们使用多个源元素，浏览器将使用第一个识别的格式 −

如果任何一种格式加载失败，这种情况很有用，另一种格式将作为备份。

Your browser does not support the video element.

输出

当脚本执行时，它将生成一个由网页上以 MP4 格式显示的视频组成的输出，而 Ogg 格式的视频则留在后面，因为浏览器首先识别 MP4 格式。

相关文章

canvas fabric.js 的层

如何编写表单来辅助浏览器的自动完成功能?

如何在 Firefox 中刷新页面?

如何在 HTML 页面中包含外部 JavaScript?

如何在浏览器中删除书签(Firefox、Chrome)

如何更改 Firefox 浏览器主题?

如何设计现代网站?

如何在您的网络浏览器(Chrome 和 Internet Explorer)中屏蔽网站

如何设计响应式网站?

如何一步一步创建网站?

打印

下一节 ❯❮ 上一节