Js监听Video视频播放、暂停、结束完成等状态!

作者 : admin 本文共521个字,预计阅读时间需要2分钟 发布时间: 2023-10-22 共544人阅读

近期遇到一个小问题,视频上层的遮罩图片在视频播放时遮挡画面,需要再视频开始播放时隐藏,结束播放时再显示,上代码:

//html代码

<video src=”test.mp4″  id=myVideo controls=controls> </video>

//js代码

let elevideo = document.getElementById(‘myVideo’);
elevideo.addEventListener(‘loadedmetadata’, () => {
//视频的总长度
console.log(‘总长度:’ + elevideo.duration);
});
elevideo.addEventListener(‘play’, () => {
$(“.vr-mask”).hide()
//播放开始执行的函数
console.log(‘开始播放’);
});
elevideo.addEventListener(‘playing’, () => {
//播放中
console.log(‘播放中’);

});
elevideo.addEventListener(
‘ended’,
() => {
//结束
console.log(‘播放结束’);
$(“.vr-mask”).show()
}
);

嘟咪云,提供最优质的的资源集合
嘟咪云 » Js监听Video视频播放、暂停、结束完成等状态!

常见问题FAQ