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
关于视频纵横比:
可以用css或者html属性取控制视频尺寸,但无论使用哪种方式,视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比,那么视频边框将会拉伸,而未被视频内容填充的部分,将会显示默认的背景颜色。