本文简单介绍HTML5中的video标签,包括video元素的简单介绍、基本使用以及常用事件和属性。

简单介绍

HTML5 规定了一种通过 Video 元素来包含视频的标准方法。

Video标签用于在浏览器中提供视频控件来播放视频,示例为:<video src="movie.ogg" controls="controls"></video>,其中controls 属性提供添加播放暂停音量等控制,如果当前浏览器不支持video元素则显示video标签之间的内容。

video标签的主要属性

height 约束视频的高度。
src 规定要播放的视频的 URL。
autoplay 规定视频就绪后马上开始播放(自动播放视频)。
width 约束视频的宽度。(注意无法通过缩小视频的宽高来压缩视频
loop 规定当视频结束后将重新开始播放 , 如果设置该属性,则视频将循环播放。
preload 规定是否在页面加载后载入视频,如果设置了 autoplay 属性,则忽略该属性。
muted 规定视频的音频输出应该被静音,在高版本浏览器中,静音可以保证视频自动播放。
controls 规定浏览器应该为视频提供播放控件包括:播放 暂停 定位 音量 全屏切换 字幕等。

preload属性的取值有三种情况

auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

Video元素支持三种视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

Internet Explorer 8 不支持 video 元素

基本使用

video标签的使用方式相对简单,只需要在页面中指定位置插入video标签并设置必要的属性即可,下面给出一个简短的代码示例:

1
2
3
<video muted src="src/僵小鱼.mp4" autoplay="autoplay" width="600"  controls="controls"> 
您当前的浏览器不支持该控件,请升级浏览器!
</video>

说明 上面的代码会在页面中插入一个宽度为600的视频控件,src属性控制的是播放视频的资源路径,autoplay表示设置自动播放,controls表示为标签提供对用的播放控件,muted属性表示设置让视频静音(自动播放必须设置该属性)。

source 元素说明

video 元素允许多个 source 元素,source 元素可以链接不同的视频文件,浏览器将使用第一个可识别格式的文件,下面给出简短的代码示例。

1
2
3
4
5
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持当前控件!
</video>

属性、方法和事件

video元素同样拥有属性、方法和事件

video元素的方法包括播放play()暂停pause()加载load()

video元素的属性包括是否静音(muted)是否自动播放(autoPlay)等,可以被读取或设置。

video元素相关的DOM 事件还能够帮我们监听视频音量改变(volumechange)播放结束(ended)等。

下面给出一个简短的代码示例,通过按钮可以来控制视频的播放、暂停和放大缩小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<video src="src/僵小鱼.mp4" width="600px" id="my_video"></video>
<div class="control-video">
<button id="play_pause">播放</button>
<button id="make_big">放大</button>
<button id="make_small">缩小</button>
</div>

<script>
var media = document.getElementById("my_video");
var playPauseBtn = document.getElementById("play_pause");
var makeBigBtn = document.getElementById("make_big");
var makeSmallBtn = document.getElementById("make_small");

playPauseBtn.onclick = function () {
if (media.paused)
{
this.innerHTML = "暂停";
media.play();
}else
{
this.innerHTML = "播放";
media.pause();
}
};
makeBigBtn.onclick = function () {
media.width += 50;
};

makeSmallBtn.onclick = function () {
media.width -= 50;
}
</script>

video元素的属性列表

readyState 当前状态
paused 是否暂停
controls 是否有默认控制条
currentSrc 当前资源的URL路径
src 设置或返回资源的URL
startTime 开始时间,通常为0
volume 音量,可以设置(0~1
ended 是否结束,布尔类型值
autoPlay 是否自动播放,布尔类型值
loop 是否循环播放,布尔类型值
muted 是否静音,布尔类型值,可以设置
error 错误信息,null表示正常
buffered 返回已缓冲区域,TimeRanges
seeking 是否正在seeking(查找)
currentTime 当前播放的位置,可以设置修改
duration 当前资源长度,流则返回无限
played 返回已经播放的区域,TimeRanges
seekable 返回可以seek的区域 TimeRanges
defaultPlaybackRate 默认的回放速度,可以设置
playbackRate 当前播放速度(比如可以设置为1.5倍速度),可以设置
error.code 错误信息,具体的代码 1-用户终止 2-网络错误 3-解码错误 4-URL无效
preload 是否预载资源 取值情况有 none:不预载 metadata:预载资源
networkState 当前网络状态,结果为数值 0-未初始化 1-未使用网络 2-正下载 3-没找到资源
TimeRanges 区域对象
TimeRanges.length 区域段数
TimeRanges.start(index) 第index段区域的开始位置
TimeRanges.end(index) 第index段区域的结束位置

video元素的方法列表

1
2
3
4
media.play();                播放视频
media.pause(); 暂停视频
media.load(); 重新加载src指定的资源
media.canPlayType(type); 是否能播放某种格式的资源

说明media为获取到的页面中的video标签

video元素相关的事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var eventTester = function(e){
Media.addEventListener(e,function(){//.....},false);
}

eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载(不是因为错误引起),
eventTester("error"); 请求数据时遇到错误
eventTester("stalled"); 网速失速
eventTester("play"); play()和autoplay开始播放时触发
eventTester("pause"); pause()触发
eventTester("loadedmetadata"); 成功获取资源长度
eventTester("loadeddata"); 成功获取数据信息
eventTester("waiting"); 等待数据,并非错误
eventTester("playing"); 开始回放
eventTester("canplay"); 可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); 可以播放,歌曲全部加载完毕
eventTester("seeking"); 寻找中
eventTester("seeked"); 寻找完毕
eventTester("timeupdate"); 播放时间改变
eventTester("ended"); 播放结束
eventTester("ratechange"); 播放速率改变
eventTester("durationchange"); 资源长度改变
eventTester("volumechange"); 音量改变