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”中下载

相关推荐