二、深度解析HTML5之视频播放和音频播放

一：视频播放     

传统的视频音频播放是通过flash插件的形式完成，不是所有的浏览器都安装了flash插件，而且手机端不支持flash，这就导致视频和音频的播放会有很大的麻烦。

于是，HTML5增加音频和视频标签。

controls:添加控制面板

loop：设置循环播放

poster="":添加海报

preload：预加载

autoplay：视频自动播放

因为版权的缘故，同一个视频不可能得到所有浏览器的支持。所以引入了source标签，写在video，可以书写多个，浏览器会从上往下依次判断第一能播放的格式。

video向JS提供了几个API’

方法：

play()    播放

pause()  暂停

属性：

paused   判断视频是否处于暂停状态。如果是暂停状态，返回true；否则，返回false

currentTime  返回视频播放的当前位置

duration   返回视频的总长

playbackRate  返回视频的当前速度，1表示正常速度

muted    如果设置为true，表示静音；否则，是不静音的

volume   表示视频的音量，最大为1，最小为0

代码：

 

 

 二：音频播放

音频标签是audio 

controls   显示控制面板

loop      允许循环播放

preload   预加载

autoplay   自动播放（当添加了autoplay的时候， preload是自动失效）

给音频添加控制面板

  

 

允许音频循环播放

 

 

让音频预加载

  

允许音频自动播放

 

由于版权的问题，没有一个格式是所有浏览器都支持的，所以我们需要加source标签。浏览器从上往下依次判断source的格式，找出第一个支持的格式进行播放。