一:视频播放
传统的视频音频播放是通过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的格式,找出第一个支持的格式进行播放。