<vidio>
例:
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
<video> 标签内的内容
这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候,就会显示这段内容,这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容,在这个例子中我们提供了一个指向这个视频文件的链接,从而使用户至少可以访问到这个文件,而不会局限于浏览器的支持。
<vidio>的属性:
src属性
同 <img> 标签使用方式相同,src 属性指向你想要嵌入网页当中的视频资源,他们的使用方式完全相同。
<source>
但是,各个浏览器可能支持的视频格式不同,每种格式包括一个容器类型(如WebM、MP4和Ogg),以及一个视频编码(如Vp8、H.262和Theora)和一个音频编码(如AAC和Vorbis)
所以我们应该应用source>标签,用以下方式:
<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>
现在我们将 src 属性从 <video> 标签中移除,转而将它放在几个单独的标签 <source> 当中。在这个例子当中,浏览器将会检查 <source> 标签,并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式,这两种在目前已经足够支持大多数平台和浏览器。
每个 <source> 标签页含有一个 type 属性,这个属性是可选的,但是建议你添加上这个属性 — 它包含了视频文件的 MIME types ,同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性,浏览器会尝试加载每一个文件,直到找到一个能正确播放的格式,这样会消耗掉大量的时间和资源。
controls属性(布尔属性)
用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面,同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
width 和 height
你可以用属性控制视频的尺寸,也可以用 CSS 来控制视频尺寸。 无论使用哪种方式,视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比,那么视频边框将会拉伸,而未被视频内容填充的部分,将会显示默认的背景颜色。
autoplay(布尔属性)
这个属性会使音频和视频内容立即播放,即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上,因为用户们会比较反感自动播放的媒体文件。
loop(布尔属性)
这个属性可以让音频或者视频文件循环播放。同样不建议使用,除非有必要。
muted(布尔属性)
这个属性会导致媒体播放时,默认关闭声音。
poster
这个属性指向了一个图像的URL,这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件,有3个值可选:
“none” :不缓冲
“auto” :页面加载后缓存媒体文件
“metadata” :仅缓冲文件的元数据
<audio>
<audio> 标签与 <video> 标签的使用方式几乎完全相同,有一些细微的差别比如下面的边框不同,与HTML5 <video>的差异如下:
- <audio> 标签不支持 width/height 属性 — 由于其并没有视觉部件,也就没有可以设置 width/height 的内容。
- 同时也不支持 poster 属性 — 同样,没有视觉部件。
显示音轨文本
许多人不想(或者不能)听到 Web 上的音频/视频内容。一个典型的 WebVTT 文件如下:
WEBVTT
1 00:00:22.230 --> 00:00:24.606 第一段字幕
2 00:00:30.739 --> 00:00:34.074 第二段
…
让其与 HTML 媒体一起显示,你需要做如下工作:
- 以 .vtt 后缀名保存文件。
- 用 <track> 标签链接 .vtt 文件, <track> 标签需放在 <audio> 或 <video> 标签当中,同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型,如 subtitles 、 captions 、 descriptions。然后,使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
总结
问题:
- 为什么各个浏览器支持的音视频格式不同?可否有一个固定的代码,用来支持所有浏览器??
- 为什么淘汰掉Flash?那如果想插入Flash怎么办?