video标签：播放时触发canplay事件
<video
:src="filePath"
controls
v-if="filePrefix == 'mp4' || filePrefix == 'avi'"
@canplay="getVideoDur()"
id="myVideo"
class="preview">
</video>
canplay触发的方法：bind(this)用于当前监听的函数里面获取当前vue的this对象，不使用bind则this为当前的video对象文章来源：https://www.toymoban.com/news/detail-834808.html
getVideoDur(){
var video = document.getElementById("myVideo")
video.addEventListener(
"timeupdate",
function () {
var timeDisplay;
var duration;
//用秒数来显示当前播放进度
timeDisplay = video.currentTime;
duration = video.duration;
console.log("总时长的80%", duration*0.8);
console.log("当前播放的时长", timeDisplay);
if (timeDisplay > duration*0.8) {
console.log("已超过总时长的80%");
this.changeReadedStatus(this.curFileInfo)
return;
}
}.bind(this),
false
);
},
video的其他监听type：文章来源地址https://www.toymoban.com/news/detail-834808.html
//监听播放后时间变动
video.addEventListener("timeupdate", function () {
})
//监听播放
video.addEventListener("play", function () {
})
//监听暂停
video.addEventListener("pause", function () {
})
到了这里，关于vue实时监控视频播放的进度，并在播放80%位置触发相应操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
