移动端
在<video>的初始化后,会调用如下事件。
@canplay="canplay"
解决方案:<video>添加自动播放属性:
autoplay="autoplay"
然后这个方法里,用js在0.01秒后主动关闭播放,接着在0.1秒之后获取视频总长度即可(这里用0.01秒有几率失败)。
这样连视频的预览图都省了,哈哈哈😁😁😁😁😁。。。。
canplay() {
this.getSize();
//表示视频已经加载好了
//这可以获取视频真是高度和宽度,
console.log("视频已准备好了,可以播放,宽度:" + this.videoWidth + ",高度:" + this.videoHeight)
setTimeout(()=>{
this.playPause();
setTimeout(()=>{
this.getSize();
},100);
},10);
},
pc端
pc端<video>的监听事件没什么问题,一共有这么多种监听事件。
<video ref="video"
controls
autoplay="autoplay"
@loadedmetadata="loadedmetadata"
@canplay="canplay"
@waiting="waiting"
@timeupdate="timeupdate"
@play="play"
@pause="pause"
@ended="ended"
>
canplay() {
//表示视频已经加载好了
//这可以获取视频真是高度和宽度,
},
waiting() {//转圈的时候才会调用,秒加载好像不会触发
console.log("加载中");
},
loadedmetadata() {
this.totalTime = this.$refs.video.duration;
console.log("获取视频总时间长度:" + this.formatTime(this.totalTime));
},
play() {
this.displayStatus = true;
console.log("开始播放");
},
pause() {
console.log("暂停播放");
this.displayStatus = false;
},
ended() {
console.log("播放结束");
},
timeupdate() { //播放的时间戳更新
this.nowTime = this.$refs.video.currentTime
this.totalTime = this.$refs.video.duration
},
this.$refs.video.onloadstart =(e)=> {
//在浏览器开始寻找指定视频/音频(audio/video)触发
console.log("onloadstart",e)
}
this.$refs.video.onprogress =(e)=> {
//在浏览器下载指定的视频/音频(audio/video)时触发
console.log("onprogress",e)
}
this.$refs.video.ondurationchange =(e)=> {
//事件在视频/音频(audio/video)的时长发生变化时触发
console.log("ondurationchange",e)
}
this.$refs.video.onloadeddata =(e)=> {
//事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
console.log("onloadeddata",e)
}
this.$refs.video.oncanplaythrough =(e)=> {
//可以正常播放且无需停顿和缓冲时触发
console.log("oncanplaythrough",e)
}