video(视频)和audio(音频)是一个很棒的媒体标签,代替了flash,兼容pc端、移动端、APP,但是它的api文档很少,网上找了一些也不是很全,正好这次做了个项目就是用到video和audio,也用到了好多接口:监听事件、属性和方法。
先写一下html代码:
video标签写法一:
<video id="media" src="视频地址" controls width="100%" height="300"></video>
video标签写法二:
<video width="100%" height="300" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
video标签属性
src:视频的URL
poster:视频封面,没有播放时显示的图片
preload:没有播放时预加载(设置autoplay属性时失效)
autoplay:页面加载自动播放(移动端失效,微信里面需要用微信接口可以自动播放)
loop:循环播放
controls:浏览器自带的控制条
width:视频宽度
height:视频高度
audio标签写法一:
<audio id="media" src="音频地址" controls></audio>
audio标签写法二:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
audio标签属性:
src:音乐的URL
preload:没有播放时预加载(设置autoplay属性时失效)
autoplay:页面加载自动播放(移动端失效,微信里面需要用微信接口可以自动播放)
loop:循环播放
controls:浏览器自带的控制条
javascript代码:
//获取audio和video的标签
var oMedia=document.getElementById("media");
属性:
属性(用法如:oMedia.error) 说明
error null:正常
error.code 1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentSrc 返回当前资源的URL
src(常用) 返回或设置当前资源的URL
networkState 0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到
buffered 返回已缓冲区域
preload 没有播放时预加载(设置autoplay属性时失效)
readyState 1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
seeking 是否正在seeking
currentTime(常用) 当前播放的位置,赋值可改变位置
startTime 一般为0,如果为流媒体或者不从0开始的资源,则不为0
duration(常用) 当前资源长度 流返回无限
paused(常用) 是否暂停
defaultPlaybackRate 默认的回放速度,可以设置
playbackRate 当前播放速度,设置后马上改变。1.0 正常速度,0.5 半速(更慢),2.0 倍速(更快),-1.0 向后,正常速度,-0.5 向后,半速
played(常用) 是否在播放
seekable 返回可以seek的区域
ended(常用) 是否结束(实际开发中可以用于判断当前媒体播放结束后,跳转下一个或上一个)
autoPlay(常用) 页面加载自动播放(移动端失效,微信里面需要用微信接口可以自动播放)
loop 是否循环播放
controls 是否有默认控制条
volume 音量:1.0 是最高音量(默认),0.5 是一半音量 (50%),0.0 是静音
muted 静音
方法:
方法(用法如:oMedia.paly()) 说明
play()(常用) 播放
pause()(常用) 暂停
start(index) 第index段区域的开始位置
end(index) 第index段区域的结束位置
canPlayType(type) 是否能播放某种格式的资源
监听事件:
代码示例:
//play()和autoplay开始播放时触发
oMedia.addEventListener("play",function(){
//在这里写代码
});
事件 说明
loadstart 客户端开始请求数据
progress 客户端正在请求数据
error 请求数据时遇到错误
stalled 网速失速
play(常用) play()和autoplay开始播放时触发
pause(常用) 暂停时触发
loadedmetadata 当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件。
loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。
waiting(常用) 等待数据,并非错误(实际开发中网速慢时出现loading图标在这里写代码)
playing(常用) 正在播放时触发。(实际开发中获取“当前时长”和“总时长”在这里写代码)
canplay 可以播放,但中途可能因为加载而暂停
canplaythrough 可以播放,歌曲全部加载完毕
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
timeupdate 播放时间改变
ended(常用) 播放结束
ratechange 播放速率改变
durationchange 资源长度改变
volumechange 音量改变