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

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

//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()
}
);