Web中的音视频

最新推荐文章于 2024-03-25 23:15:02 发布

原创最新推荐文章于 2024-03-25 23:15:02 发布 · 898 阅读

1 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

29 篇文章

订阅专栏

web 开发者们一直以来想在 Web 中使用音频和视频，自21世纪初以来，我们的带宽开始能够支持任意类型的视频。传统的 web 技术（如 HTML ）不能够在 Web 中嵌入音频和视频，所以一些像 Flash (后来有 Silverlight ) 的专利技术在处理这些内容上变得很受欢迎。这些技术能够正常的工作，但是却有着一系列的问题，包括无法很好的支持 HTML/CSS 特性、安全问题，以及可行性问题。传统的解决方案能够解决许多这样的问题，前提是它能够正确的工作。幸运的是，几年之后 HTML5 标准提出，其中有许多的新特性，包括和标签，以及一些 JavaScript 和 APIs 用于对其进行控制。

我们先来快速的了解一下术语。像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的。视频和音频都有不同的格式，如下:

WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。 MP4
容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。
老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome当中支持，不过这个容器已经被更强大的 WebM 容器所取代

音频播放器将会直接播放音频文件，例如 MP3 和 Ogg 文件。这些不需要容器。

浏览器兼容情况：
在这里插入图片描述

综合移动端和桌面浏览器端的情况，包含AAC 以及 MP3 音频和 H.264 视频的mp4格式是兼容性最好的视频格式

MP3 (音频格式) 和 MP4/H.264 (视频格式) 是被广泛支持的两种格式，并且质量良好。然而，他们却有专利的阻碍 — MP3的专利会持续到2017年，而 H.264会持续到2027年早期。意思也就是说浏览器若想要支持这些格式，就得支付高额的费用。此外，许多人反对软件技术垄断，支持开放的格式。这就是为什么我们需要准备不同的格式来兼容不同的浏览器。

因此可以用多格式的源来写入标签。浏览器将会检查标签，并且播放第一个与其自身 codec 相匹配的媒体。

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video