H5新特性——音视频

发表于 2016-07-11 阅读次数：

HTML5 之前在页面播放需要使用 flash 播放器；HTML5 添加两个标签：

<video></video>
<audio></audio>

这两个标签有一些特殊属性、事件、方法。

HTML5 新特性——视频

1.Video 标签可用的属性：

(1)src：待播放的资源的URL
(2)width：播放区域的宽度
(3)height：播放区域的高度
(4)controls：是否显示播放控件，默认不显示
(5)autoplay：是否自动播放，默认不自动播放
(6)loop：是否循环播放，默认不循环
(7)preload：如何预加载视频，可以赋值为
    “none”：不预加载
    “metadata”：只预加载元数据，如影片宽、高、大小、时长
    “auto”：（默认值）自动预加载元数据以及部分影片数据
(8)poster：影片播放之前显示的“电影海报”

2.Video 对象的成员

1.autoplay:false
2.controls:false
3.currentTime:0             当前播放到哪一秒
4.duration:NaN            总时长
5.ended:false
6.loop:false            是否循环
7.muted:false            是否静音
8.oncanplay:null            当能够播放时触发
9.oncanplaythrough:null    当能够顺利播放一段时间
10.onended:null            当播放的结尾时触发
11.onerror:null            当播放错误时触发
12.onloadeddata:null        当加载了影片数据时触发
13.onloadedmetadata:null    当加载了影片元数据时触发
14.onpause:null            当影片暂停时触发
15.onplay:null            当影片开始播放时触发
16.paused:true            当前是否处于暂停状态
17.poster:""                电影海报
18.preload:"auto"            如何预加载
19.src:"http://127.0.0.1/html5_day02/resource/birds.mp4"
20.videoHeight:0
21.videoWidth:0
22.volume:1
23.play(): function(){}    使用JS控制影片播放
24.pause(): function(){}    使用JS控制影片暂停

HTML5 新特性——音频

HTML5 之前，播放音频可以使用 flash 播放器，或者使用 bgsound（IE 专有，只能网页的背景音乐，不能使用 JS 控制播放、音量）。
HTML5 中，使用 audio 标签来播放音频。该标签的常用属性与 video 几乎一样，如：

(1)src
(2)autoplay：是否自动播放，默认为false
(3)controls：是否显示播放控制条，默认为false
(4)loop：是否循环播放，默认为false