作者 | 阮一峰
除了图像,网页还可以放置视频和音频。
1、
标签是一个块级元素,用于放置视频。如果浏览器支持加载的视频格式,就会显示一个播放器,否则显示
内部的子元素。
<video src="example.mp4" controls>
<p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件a>。p>
video>
上面代码中,如果浏览器不支持该种格式的视频,就会显示
内部的文字提示。
有以下属性。
src
:视频文件的网址。
controls
:播放器是否显示控制栏。该属性是布尔属性,不用赋值,只要写上属性名,就表示打开。如果不想使用浏览器默认的播放器,而想使用自定义播放器,就不要使用该属性。
width
:视频播放器的宽度,单位像素。
height
:视频播放器的高度,单位像素。
autoplay
:视频是否自动播放,该属性为布尔属性。
loop
:视频是否循环播放,该属性为布尔属性。
muted
:是否默认静音,该属性为布尔属性。
poster
:视频播放器的封面图片的 URL。
preload
:视频播放之前,是否缓冲视频文件。这个属性仅适合没有设置autoplay
的情况。它有三个值,分别是none
(不缓冲)、metadata
(仅仅缓冲视频文件的元数据)、auto
(可以缓冲整个文件)。
playsinline
:iPhone 的 Safari 浏览器播放视频时,会自动全屏,该属性可以禁止这种行为。该属性为布尔属性。
crossorigin
:是否采用跨域的方式加载视频。它可以取两个值,分别是anonymous
(跨域请求时,不发送用户凭证,主要是 Cookie),use-credentials
(跨域时发送用户凭证)。
下面是一个例子。
<video width="400" height="400"autoplay loop mutedposter="poster.png">
video>
上面代码中,视频播放器的大小是 400 x 400,会自动播放和循环播放,并且静音,还带有封面图。这是网站首页背景视频的常见写法。
HTML 标准没有规定浏览器需要支持哪些视频格式,完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式,可以使用
标签,放置同一个视频的多种格式。
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频,请下载<a href="example.mp4">视频文件a>。p>
video>
上面代码中,
标签的
type
属性的值是视频文件的 MIME 类型,上例指定了两种格式的视频文件:MP4 和 WebM。如果浏览器支持 MP4,就加载 MP4 格式的视频,不再往下执行了。如果不支持 MP4,就检查是否支持 WebM,如果还是不支持,则显示提示。
2、
标签是一个块级元素,用于放置音频,用法与
标签基本一致。
<audio controls>
<source src="foo.mp3" type="audio/mp3">
<source src="foo.ogg" type="audio/ogg">
<p>你的浏览器不支持 HTML5 音频,请直接下载<a href="foo.mp3">音频文件a>。p>
audio>
上面代码中,
标签内部使用
标签,指定了两种音频格式:优先使用 MP3 格式,如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频,则提供下载链接。
标签的属性与
标签类似,参见上一节。
3、
标签用于指定视频的字幕,格式是 WebVTT (
.vtt
文件),放置在
标签内部。它是一个单独使用的标签,没有结束标签。
<video controls src="sample.mp4">
<track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en">
<track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
video>
上面代码指定视频文件的英文字幕和中文字幕。
标签有以下属性。
4、
标签用于
、
、
的内部,用于指定一项外部资源。单标签是单独使用的,没有结束标签。
它有如下属性,具体示例请参见相应的容器标签。
5、
标签用于嵌入外部内容,这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致,很可能不是所有浏览器的用户都能访问这部分内容,建议谨慎使用。
下面是嵌入视频播放器的例子。
<embed type="video/webm"src="/media/examples/flower.mp4"width="250"height="200">
上面代码嵌入的视频,将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件,视频就无法播放。
标签具有如下的通用属性。
浏览器通过
type
属性得到嵌入资源的 MIME 类型,一旦该种类型已经被某个插件注册了,就会启动该插件,负责处理嵌入的资源。
下面是 QuickTime 插件播放 MOV 视频文件的例子。
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
下面是启动 Flash 插件的例子。
<embed src="whoosh.swf" quality="medium"bgcolor="#ffffff" width="550" height="400"name="whoosh" align="middle" allowScriptAccess="sameDomain"allowFullScreen="false" type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer">
上面代码中,如果浏览器没有安装 Flash 插件,就会提示去
pluginspage
属性指定的网址下载。
6、,
标签作用跟
相似,也是插入外部资源,由浏览器插件处理。它可以视为
的替代品,有标准化行为,只限于插入少数几种通用资源,没有历史遗留问题,因此更推荐使用。
下面是插入 PDF 文件的例子。
<object type="application/pdf"data="/media/examples/In-CC0.pdf"width="250"height="200">
object>
上面代码中,如果浏览器安装了 PDF 插件,就会在网页显示 PDF 浏览窗口。
具有如下的通用属性。
data
:嵌入的资源的 URL。
form
:当前网页中相关联表单的id
属性(如果有的话)。
height
:资源的显示高度,单位为像素,不能使用百分比。
weight
:资源的显示宽度,单位为像素,不能使用百分比。
type
:资源的 MIME 类型。
typemustmatch
:布尔属性,表示data
属性与type
属性是否必须匹配。
下面是插入 Flash 影片的例子。
<object data="movie.swf"type="application/x-shockwave-flash">object>
标签是一个容器元素,内部可以使用
标签,给出插件所需要的运行参数。
<object data="movie.swf" type="application/x-shockwave-flash">
<param name="foo" value="bar">
object>
相关文章
【HTML 教程】链接标签