video 直播 视频播放
2020-08-24 本文已影响0人
DTripper
video.js
拥有丰富的插件,使用简单
hls.js
小巧,适合直播推流
video标签属性及事件
/**
* poster 贴图
* controls 自动播放
* muted 静音
* loop 循环播放
* preload 预加载
* controls 自动播放
*/
<video src="test.mp4" poster="./poster.jpg" controls muted loop preload>
<!-- 音量控制 -->
<video src="test.mp4" id="_volume"></video>
<script type="text/javascript">
var v = document.getElementById('_volume');
v.volume = 0.5;
</script>
<!--播放时间控制 -->
<video src="test.mp4" id="_time"></video>
<script type="text/javascript">
var t = document.getElementById('_time');
t.currentTime = 60; //秒
</script>
<!--播放地址切换 -->
<video src="test.mp4" id="_src"></video>
<script type="text/javascript">
var s = document.getElementById('_src');
setTimeout(()=>{
s.src = 'test-2.mp4'
},1000)
</script>
<!--备用地址切换 -->
<video id="_source">
<source src="test-1.mp4" type="video/mp4">
<source src="test-2.mp4" type="video/mp4">
<source src="test-3.mp4" type="video/mp4">
</video>
<script type="text/javascript">
//播放失败时,切换下一个
var s = document.getElementById('_source');
setTimeout(()=>{
console.log('src',s.currentSrc)
},1000)
</script>
以下简单介绍事件
<video src="text.mp4" id="video">
var video = document.getElementById('video');
//视频在创立初期时,duration是NaN 需要加载完视频元数据之后才能获取到视频时长(有可能只获取一部分)
console.log(video.duration,'duration')
video.paused //播放是否暂停
video.play() //开始播放
video.pause() //暂停播放
//视频开始加载 第一个执行的事件
video.addEventListener('loadstart',function(e){
console.log(e,'loadstart')
})
//视频时长发生变化
video.addEventListener('durationchange',function(e){
//此时可以获取到视频时长
console.log(e,'durationchange')
})
//视频元数据加载完毕
video.addEventListener('loadedmetadata',function(e){
console.log(e,'loadedmetadata')
})
//没有足够的数据,来播放下一个视频片段
video.addEventListener('loadeddata',function(e){
console.log(e,'loadeddata')
})
//正在加载数据 会多次触发
video.addEventListener('progress',function(e){
console.log(e,'progress')
})
//通常视频播放需要canplay,canplaythrough事件
//播放视频有部分帧准备完毕,可以播放
video.addEventListener('canplay',function(e){
console.log(e,'canplay')
})
//已经可以流畅的播放
video.addEventListener('canplaythrough',function(e){
console.log(e,'canplaythrough')
})
//监听视频播放 (暂停到播放状态的改变)
video.addEventListener('play',function(e){
console.log(e,'play')
})
//监听视频暂停 (播放到暂停状态的改变)
video.addEventListener('pause',function(e){
console.log(e,'pause')
})
//跳转到指定地方时触发
video.addEventListener('seeking',function(e){
console.log(e,'seeking')
})
//跳转到指定地方后触发
video.addEventListener('seeked',function(e){
console.log(e,'seeked')
})
//无法解码,视频无法更新 (缓冲)
video.addEventListener('waiting',function(e){
console.log(e,'waiting')
})
//从waiting状态解码成功后可到playing状态
video.addEventListener('playing',function(e){
console.log(e,'playing')
})
//视频时间实时更新 (自定义进度条)
video.addEventListener('timeupdate',function(e){
console.log(e,'timeupdate')
})
//视频播放结束(结束后插入广告)
video.addEventListener('ended',function(e){
console.log(e,'ended')
})
//视频播放报错 (测试时 重试大概31次触发error事件)
video.addEventListener('error',function(e){
console.log(e,'error')
})