HTML5中视频音频的使用详解

一、video

1.1 video支持视频格式

常见的视频格式
 

• 视频的组成部分：画面、音频、编码格式
• 视频编码：H.264、Theora、VP8(google开源)

HTML5支持的视频格式：

1、Ogg 

     带有Theora视频编码+Vorbis音频编码的Ogg文件 

         支持的浏览器:F、C、O 

2、MEPG4 

     带有H.264视频编码+AAC音频编码的MPEG4文件 

     支持的浏览器: S、C 

3、WebM 

     带有VP8视频编码+Vorbis音频编码的WebM格式 

     支持的浏览器: I、F、C、O 

     劣势：视频少、转码器几乎没有，不好转码 

想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

1.2 标签原型

指定一种视频格式，不能播就提示

<video id="media" src="examp.mp4" width="500" 
poster="examp1.jpg" >您的浏览器不支持video</video>

给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
 

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

<video controls = “controls”>
   <source src=”1.mp4” type=”video/mp4” />  //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”
   <source src = “2.ogg” type=”video/ogg” />  //ogg格式
   <source src=”3.webm” type=”video/webm” />   //webm格式
</video>

1.3 重要的video标签属性

属性(常用) 值 功能描述 controls controls 是否显示播放控件 autoplay autoplay 设置是否打开浏览器后自动播放 width Pilex（像素） 设置播放器的宽度 height Pilex（像素） 设置播放器的高度 loop loop 设置视频是否循环播放（即播放完后继续重新播放） preload preload 设置是否等加载完再播放 src url 设置要播放视频的url地址 poster imgurl 设置播放器初始默认显示图片 autobuffer autobuffer 设置为浏览器缓冲方式，不设置autoply才有效

API 属性 

属性 描述 audioTracks 返回表示可用音轨的 AudioTrackList 对象 buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象 controller 返回表示音频/视频当前媒体控制器的 MediaController 对象 crossOrigin 设置或返回音频/视频的 CORS 设置 currentSrc 返回当前音频/视频的 URL currentTime 设置或返回音频/视频中的当前播放位置（以秒计） defaultMuted 设置或返回音频/视频默认是否静音 defaultPlaybackRate 设置或返回音频/视频的默认播放速度 duration 返回当前音频/视频的长度（以秒计） ended 返回音频/视频的播放是否已结束 error 返回表示音频/视频错误状态的 MediaError 对象 mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素） muted 设置或返回音频/视频是否静音 networkState 返回音频/视频的当前网络状态 paused 设置或返回音频/视频是否暂停 playbackRate 设置或返回音频/视频播放的速度 played 返回表示音频/视频已播放部分的 TimeRanges 对象 readyState 返回音频/视频当前的就绪状态 seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象 seeking 返回用户是否正在音频/视频中进行查找 startDate 返回表示当前时间偏移的 Date 对象 textTracks 返回表示可用文本轨道的 TextTrackList 对象 videoTracks 返回表示可用视频轨道的 VideoTrackList 对象 volume 设置或返回音频/视频的音量 常用API属性

• duration：返回当前音频/视频的长度（以秒计）
• paused：设置或返回音频/视频是否暂停
• currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
• ended：返回音频/视频的播放是否已结束

1.4 Video API

1.4.1 Video 方法

API 事件说明 play video.play(); 播放视频 pause video.pause(); 暂停播放视频 load video.load(); 将全部属性回复默认值，视频恢复重新开始状态 canPlayType var support = videoid.canPlayType(‘video/mp4′); 

判断浏览器是否支持当前类型的视频格式

返回值：
        空字符串：不支持Maybe：可能支持Probably：完全支持

常用方法

• play()：开始播放音频/视频
• pause()：暂停当前播放的音频/视频

1.4.2网络状态

获取video对象

Media = document.getElementById("media");

1.Media.currentSrc; 

    返回当前资源的URL 

2.Media.src = value; 

    返回或设置当前资源的URL 

3.Media.canPlayType(type); 

    是否能播放某种格式的资源 

4.Media.networkState; 

    0.此元素未初始化 

    1.正常但没有使用网络 

    2.正在下载数据 

    3.没有找到资源 

5.Media.load(); 

    重新加载src指定的资源 

6.Media.buffered; 

    返回已缓冲区域，TimeRanges 

7.Media.preload; 

    none:不预载 

    metadata:预载资源信息 

    auto: 

1.4.3 准备状态

1.Media.readyState 

2.Media.seeking; 

    是否正在seeking 

1.4.4 回放状态

1.Media.currentTime = value; 

    当前播放的位置，赋值可改变位置 

2.Media.startTime; 

    一般为0，如果为流媒体或者不从0开始的资源，则不为0 

3.Media.duration; 

    当前资源长度 流返回无限 

4.Media.paused; 

    是否暂停 

5.Media.defaultPlaybackRate = value; 

    默认的回放速度，可以设置 

6.Media.playbackRate = value; 

    当前播放速度，设置后马上改变 

7.Media.played; 

    返回已经播放的区域，TimeRanges，关于此对象见下文 

8.Media.seekable; 

    返回可以seek的区域 TimeRanges 

9.Media.ended; 

    是否结束 

10.Media.autoPlay; 

    是否自动播放 

11.Media.loop; 

    是否循环播放 

12.Media.play(); 

    播放 

13.Media.pause(); 

    暂停 

1.4.5 视频控制

• Media.controls;//是否有默认控制条
• Media.volume = value; //音量
• Media.muted = value; //静音
• TimeRanges(区域)对象
• TimeRanges.length; //区域段数
• TimeRanges.start(index) //第index段区域的开始位置
• TimeRanges.end(index) //第index段区域的结束位置

1.4.6 相关事件

1.首先绑定事件的话可以通过js中的addEventListener方法来绑定事件 

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

2.常用事件 

• oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
• ontimeupdate： 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
• onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。

1.4.7 其他

1.全屏:

• element.webkitRequestFullScreen();( webkit)
• element.mozRequestFullScreen(); (Firefox )
• element.requestFullscreen(); (W3C )

2.退出全屏：

• document.webkitCancelFullScreen(); (webkit )
• document.mozCancelFullScreen(); (Firefox)
• document.exitFullscreen(); (W3C)

二、audio

2.1 audio格式

1.常见的音频格式

    音频编码：ACC、MP3、Vorbis 

2.HTML5支持的音频格式：

• Ogg 免费 支持的浏览器:C、F、O
• MP3 收费 支持的浏览器: I、C、S
• Wav 收费 支持的浏览器: F、O、S

2.2 audio标签中的一些常用属性

属性 属性值 注释 src url 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持） preload preload 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。 loop loop 循环播放 controls controls 是否显示默认控制条（控制按钮） autoplay autoplay 自动播放

对于音乐格式的支持 

音频格式 Chrome Firefox IE9 Opera Safari OGG 支持 支持 支持 不支持 不支持 MP3 支持 不支持 支持 不支持 支持 WAV 不支持 支持 不支持 支持 不支持

audio可通过new来创建。也可以通过用document来获取

//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。

2.3 api所提供的对audio标签操作的一些属性和方法

属性 注释 duration 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN paused 如果媒体文件被暂停，那么paused属性返回true，反之则返回false ended 如果媒体文件播放完毕返回true muted 用来获取或设置静音状态。值为boolean volume 控制音量的属性值为0-1;0为音量最小，1为音量最大 startTime 返回起始播放时间 error 返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取 currentTime 用来获取或控制当前播放的时间，单位为s。 currentSrc 以字符串形式返回正在播放或已加载的文件

2.4 常用的控制用的函数

函数 作用 load() 加载音频、视频软件 play() 加载并播放音频、视频文件或重新播放暂停的的音频、视频 pause() 暂停出于播放状态的音频、视频文件 canPlayType(obj) 测试是否支持给定的Mini类型的文件

2.5 audio标签API中的常用事件

首先绑定事件的话可以通过js中的addEventListener方法来绑定事件  

事件名称 事件作用 loadstart 客户端开始请求数据 progress 客户端正在请求数据（或者说正在缓冲） play play()和autoplay播放时 pause pause()方法促发时 ended 当前播放结束 timeupdate 当前播放时间发生改变的时候。播放中常用的时间处理 canplaythrough 歌曲已经载入完全完成 canplay 缓冲至目前可播放状态。

其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。