前端开发系列039-基础篇之Video基础

本文简单介绍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标签并设置必要的属性即可，下面给出一个简短的代码示例：

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

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

source 元素说明

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

<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）等。

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

<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元素的方法列表

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

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

video元素相关的事件

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");    音量改变