HTML5学习笔记(三)-Video、Audio

运维工程师日记

2013-07-03

关注关注

一、概述

HTML5增加了audio和video两个元素，开发人员不必使用插件就能播放音频和视频了。

audio元素和video元素有两个关键概念：容器(container)和编解码器(codec)

1、视频容器

主流食品容器支持的视频格式：

Audio Video Interleave(.avi)、Flash Video(.flv)、MPEG4(.mp4)、Matroska(.mkv)、Ogg(.ogv)

2、音频视频编解码器

一些音频编解码器：

ACC、MPEG-3、Ogg Vorbis

一些视频编解码器：

H.264、VP8、Ogg Theora

WebM：google发布的视频格式，清晰且免费。视频使用VP8编码，音频使用Ogg Vorbis编码。

3、HTML5音视频的限制

暂时没有对流视频的支持和规范。

资源受跨域共享的限制。

全频视频无法通过脚本控制。浏览器提供控制方法。

4、浏览器的支持

不同浏览器对容器和编解码的支持是不同的。可以查看http://www.longtailvideo.com/html5/formats/

二、使用

1、检测浏览器是否支持：

//通过!!运算符将结果转换成布尔值

var hasVieo = !!(document.createElement('video').canPlayType);

<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="vodeo.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>

2、字幕

使用WebVTT标准。相见：http://dev.w3.org/html5/webvtt/

<video src="video.ogg" controls>
    <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt">
    <track label="Dutch" kind="subtitles" srclang="nl" src="subtitles_nl.vtt">
    Your browser does not support HTML5 video.
</video>

3、多个源

为了应对不同浏览器对媒体的支持不同，可以设置多个类型的源文件。

浏览器会按照声明的顺序判断，如果支持的不止一种，浏览器会选择支持的第一个来源。

<audio controls>
    <source src="johann_sebastian_bach_air.ogg">
    <source src="johann_sebastian_bach_air.mp3">
    An audio clip from Johann Sebastian Bach.
</audio>

4、媒体的控制

常用控制函数

函数	动作
load()	加载音频/视频文件，为播放做准备。通常情况下不必调用，除非是动态生成的元素。用来播放前预加载。
play()	加载（有必要的话）并播放音频/视频文件。除非音频/视频已经暂停在其他位置了，否则默认从开头播放
pause()	暂停处于播放状态的音频/视频文件
canPlayType(type)	测试video元素是否支持给定MIME类型的文件

只读的媒体特性

只读特性	值
duration	整个媒体文件的播放时长，以s为单位。如果无法获取时长，则返回NaN
paused	如果媒体文件当前被暂停，则返回true。如果还未开始播放，默认返回true
ended	如果媒体文件已经播放完毕，则返回true
startTime	返回最早的播放其实时间，一般是0.0，除非是缓冲过的媒体文件，并且一部分内容已经不在缓冲区
error	在发生了错误的情况下返回的错误代码
currentSrc	以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件

可用脚本控制的特性值

特性	值
autoplay	将媒体文件设置为创建后自动播放，或者查询是否已设置为autoplay
loop	返回是否循环播放，或设置循环播放（或者不循环播放）
currentTime	以秒为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
controls	显示或隐藏用户控制界面，或者查询用户控制界面当前是否可见
volume	在0.0到1.0之间设置音频音量的相对值，或者产寻当前音量相对值
muted	为音频文件设置静音或者消除静音，或者检测当前是否为静音
autobuffer	通知播放器在媒体文件开始播放前，是否惊醒缓冲加载。如果已设置为autoplay，则忽略此特性

video元素的额外特性

特性	值
poster	在视频加载完成之前，代表视频内容的图片的URL地址。该特性可读可修改
width、height	读取或设置显示尺寸。如果大小不匹配视频本身，会导致边缘出现黑色条状区域
videoWidth、videoHeight	返回视频的固有或自使用宽度和高度。只读

书中的例子很好，如果有兴趣可以看一看。

书中的示例代码可以在http://www.apress.com/9781430238645 的“Source Code/Downloads”中下载

html5 video audio