⾳视频-Video标签整理（属性、⽅法、事件）
前⾔
啊嘞啊嘞，没想到哎，video原⽣标签可以在⼿机端进⾏hls流直播（电脑端不可以，需要使⽤播放器），神奇
使⽤
<video
id="video"
:poster="imgurl"
:src="url"
autoplay
controls="controls"
></video>
1. 标签可设置属性
src ：视频的属性
poster：视频封⾯，没有播放时显⽰的图⽚
preload：预加载
autoplay：⾃动播放
loop：循环播放
controls：浏览器⾃带的控制条
width：视频宽度
height：视频⾼度
2. 对象的属性和⽅法
获取dom对象
this.ElementById('video')
基础属性
- this.video.currentSrc; //返回当前资源的URL
- this.video.src = value; //返回或设置当前资源的URL
- this.video.buffered; //返回已缓冲区域，TimeRanges
- this.video.preload; //none：不预载 metadata：预载资源信息 auto:
- //准备状态
- adyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA - this.video.seeking; //是否正在seeking
回放状态
this.video.currentTime = value; //当前播放的位置，赋值可改变位置
this.video.startTime; //⼀般为0，如果为流媒体或者不从0开始的资源，则不为0
this.video.duration; //当前资源长度流返回⽆限
this.video.paused; //是否暂停
this.video.defaultPlaybackRate = value;//默认的回放速度，可以设置
this.video.playbackRate = value;//当前播放速度，设置后马上改变
this.video.played; //返回已经播放的区域，TimeRanges，关于此对象见下⽂
this.video.seekable; //返回可以seek的区域 TimeRanges
ded; //是否结束
this.video.autoPlay; //是否⾃动播放
this.video.loop; //是否循环播放
//视频控制
ls;//是否有默认控制条
this.video.volume = value; //⾳量
this.video.muted = value; //静⾳
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
⽹络资源状况(重要)
1. this.videoworkState; //0.此元素未初始化 1.正常但没有使⽤⽹络
2.正在下载数据
3.没有到资源-; //null：正常
-de; //1.⽤户终⽌ 2.⽹络错误 3.解码错误 4.URL⽆效
⽅法
2. this.video.load(); //重新加载src指定的资源
3. this.video.canPlayType(type); //是否能播放某种格式的资源
-this.video.play(); //播放
-this.video.pause(); //暂停
4. 事件监听
//视频开始加载第⼀个执⾏的事件
this.video.addEventListener('loadstart',function(e){
// console.log(e,'loadstart')
})
//视频时长发⽣变化
this.video.addEventListener('durationchange',function(e){
//此时可以获取到视频时长
// console.log(e,'durationchange')
})
position标签属性
//视频元数据加载完毕
this.video.addEventListener('loadedmetadata',function(e){
// console.log(e,'loadedmetadata')
})
//没有⾜够的数据，来播放下⼀个视频⽚段
this.video.addEventListener('loadeddata',function(e){
// console.log(e,'loadeddata')
})
//正在加载数据会多次触发
this.video.addEventListener('progress',function(e){
// console.log(e,'progress')
})
//通常视频播放需要canplay,canplaythrough事件
//播放视频有部分帧准备完毕，可以播放
this.video.addEventListener('canplay',function(e){
// console.log(e,'canplay')
})
//已经可以流畅的播放
this.video.addEventListener('canplaythrough',function(e){
// console.log(e,'canplaythrough')
})
//监听视频播放（暂停到播放状态的改变）
this.video.addEventListener('play',function(e){
// console.log(e,'play')
})
//监听视频暂停（播放到暂停状态的改变）
this.video.addEventListener('pause',function(e){
// console.log(e,'pause')
})
/
/跳转到指定地⽅时触发
//跳转到指定地⽅时触发
this.video.addEventListener('seeking',function(e){
// console.log(e,'seeking')
})
//跳转到指定地⽅后触发
this.video.addEventListener('seeked',function(e){
// console.log(e,'seeked')
})
//⽆法解码，视频⽆法更新（缓冲）
this.video.addEventListener('waiting',(e)=>{
console.log(e,'waiting')
Toast({
type:'html',
message:'<span>当前⽹络不稳定</span>',
position:'top',
duration:2000,
className:'cctoast',
});
})
//从waiting状态解码成功后可到playing状态
this.video.addEventListener('playing',function(e){
console.log(e,'playing')
console.log('111',TimeRanges.length)
})
//视频时间实时更新 (⾃定义进度条)
this.video.addEventListener('timeupdate',function(e){
// console.log(e,'timeupdate')
})
//视频播放结束（结束后插⼊⼴告）
this.video.addEventListener('ended',(e)=>{
console.log(e,'ended')
this.video.src=this.url1
/
/ setTimeout(()=>{
//  this.video.load();
// },1000)
})
//视频播放报错（测试时重试⼤概31次触发error事件）
this.video.addEventListener('error',(e)=>{
console.log(e,'error')
console.log()
console.log(code)// //1.⽤户终⽌ 2.⽹络错误 3.解码错误 4.URL⽆效
console.log(this.videoworkState)// //0.此元素未初始化 1.正常但没有使⽤⽹络 2.正在下载数据 3.没有到资源// setInterval(()=>{
//  this.video.preload = true
//  setTimeout(()=>{
//    // this.video.preload = false
//  },500)
// },1000)
// this.video.load();
})
5. 参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。