HTML5 音频 视频

1.video元素的使用

<video 
   id='video'
   src='https://rocketsystem.oss-cn-shanghai.aliyuncs.com/TraingProgram/Medias/2310f8364bc3413ca5f86e36622b3fa1_%E5%B0%8F%E7%8B%97%E6%95%A3%E6%AD%A5.mp4' 
   controls
   width='500'
   height='300'
   poster='https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg'
   preload='metadata'
   onPlay={()=>{console.log('播放开始')}}
   onPause={()=>{console.log('播放暂停')}}
   onEnded={()=>{console.log('播放到达末尾')}}
   onError={()=>{console.log('视频出错')}}
   onCanPlay={()=>{console.log('可播放啦')}}
   onCanPlayThrough={()=>{console.log('整个视频可以播放啦')}}
   onProgress={(thread)=>{console.log('下载',thread)}}
 />

video元素的属性：
1) width，height：设置宽高
2)autoPlay：自动播放
3)controls：为视频提供控制栏
4)poster：视频播放前显示的图片路径
5)preload：设置当前视频是否缓存
none：不缓存视频
auto：默认值，要求浏览器尽可能块地下载视频
metadata：播放前只加载视频的高度宽度
6)loop：设置当前视频是否重复播放

video元素触发的事件
1)play：播放开始时触发
2)pause: 播放暂停时触发
3)ended：播放到达末尾时触发(设置为loop无效)
4)error：视频出错
5)canplay：不考虑整体状态，只要有一定的可播放帧就会触发
6)canPlayThrough：当整个视频可以播放时触发该事件

video元素的方法
1)play()：播放
2)pause()：暂停

<button onClick={()=>{document.getElementById('video').play()}}>播放</button>
<button onClick={()=>{document.getElementById('video').pause()}}>暂停</button>

video元素的属性
1)paused：当前视频是否处于暂停状态
2)ended：当前视频是否已经播放完毕
3)duration：获取当前视频的时长(单位为秒)
4)currentTime：获取当前视频播放的位置(单位为秒)

<button onClick={()=>{console.log(document.getElementById('video').paused)}}>当前是否是暂停状态</button>
<button onClick={()=>{console.log(document.getElementById('video').ended)}}>当前视频是否已经播放完毕</button>
<button onClick={()=>{console.log(document.getElementById('video').duration)}}>当前视频的时长</button>
<button onClick={()=>{console.log(document.getElementById('video').currentTime)}}>获取当前视频播放的位置</button>

2.audio音频

<audio src="someaudio.wav">
</audio>