Web 上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
视频格式
当前,video 元素支持三种视频格式:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
如何工作
如需在 HTML5 中显示视频,您所有需要的是:
<video src="movie.ogg" controls="controls"> </video>
control 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:
实例
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
实例
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Internet Explorer
Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。
<video> 标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
HTML5 <video> - 方法、属性以及事件
下面列出了大多数浏览器支持的视频方法、属性和事件:
方法 | 属性 | 事件 |
---|---|---|
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | videoHeight | error |
duration | timeupdate | |
ended | ended | |
error | abort | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
HTML5 Audio/Video 方法
方法 | 描述 |
---|---|
addTextTrack() | 向音频/视频添加新的文本轨道 |
canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
load() | 重新加载音频/视频元素 |
play() | 开始播放音频/视频 |
pause() | 暂停当前播放的音频/视频 |
HTML5 Audio/Video 属性
属性 | 描述 |
---|---|
audioTracks | 返回表示可用音轨的 AudioTrackList 对象 |
autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
buffered | 返回表示音频/视频已缓冲部分的 TimeRanges 对象 |
controller | 返回表示音频/视频当前媒体控制器的 MediaController 对象 |
controls | 设置或返回音频/视频是否显示控件(比如播放/暂停等) |
crossOrigin | 设置或返回音频/视频的 CORS 设置 |
currentSrc | 返回当前音频/视频的 URL |
currentTime | 设置或返回音频/视频中的当前播放位置(以秒计) |
defaultMuted | 设置或返回音频/视频默认是否静音 |
defaultPlaybackRate | 设置或返回音频/视频的默认播放速度 |
duration | 返回当前音频/视频的长度(以秒计) |
ended | 返回音频/视频的播放是否已结束 |
error | 返回表示音频/视频错误状态的 MediaError 对象 |
loop | 设置或返回音频/视频是否应在结束时重新播放 |
mediaGroup | 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素) |
muted | 设置或返回音频/视频是否静音 |
networkState | 返回音频/视频的当前网络状态 |
paused | 设置或返回音频/视频是否暂停 |
playbackRate | 设置或返回音频/视频播放的速度 |
played | 返回表示音频/视频已播放部分的 TimeRanges 对象 |
preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
readyState | 返回音频/视频当前的就绪状态 |
seekable | 返回表示音频/视频可寻址部分的 TimeRanges 对象 |
seeking | 返回用户是否正在音频/视频中进行查找 |
src | 设置或返回音频/视频元素的当前来源 |
startDate | 返回表示当前时间偏移的 Date 对象 |
textTracks | 返回表示可用文本轨道的 TextTrackList 对象 |
videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象 |
volume | 设置或返回音频/视频的音量 |
HTML5 Audio/Video 事件
事件 | 描述 |
---|---|
abort | 当音频/视频的加载已放弃时 |
canplay | 当浏览器可以播放音频/视频时 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时 |
durationchange | 当音频/视频的时长已更改时 |
emptied | 当目前的播放列表为空时 |
ended | 当目前的播放列表已结束时 |
error | 当在音频/视频加载期间发生错误时 |
loadeddata | 当浏览器已加载音频/视频的当前帧时 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时 |
loadstart | 当浏览器开始查找音频/视频时 |
pause | 当音频/视频已暂停时 |
play | 当音频/视频已开始或不再暂停时 |
playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
progress | 当浏览器正在下载音频/视频时 |
ratechange | 当音频/视频的播放速度已更改时 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时 |
suspend | 当浏览器刻意不获取媒体数据时 |
timeupdate | 当目前的播放位置已更改时 |
volumechange | 当音量已更改时 |
waiting | 当视频由于需要缓冲下一帧而停止 |