@Video

<video src=""></video>

<video src="" controls></video>

video.addEventListener('loadstart', () => {
    console.log('1.loadstart');
    console.log('duration', video.duration);
})
video.addEventListener('durationchange', () => {
    console.log('2.durationchange');
    console.log('duration', video.duration);
})
video.addEventListener('loadedmetadata', () => {
    console.log('3.loadedmetadata');
    console.log('duration', video.duration);
})
video.addEventListener('loadeddata', () => {
    console.log('4.loadeddata');
})
video.addEventListener('progress', () => {
    console.log('progress');
})
video.addEventListener('canplay', () => {
    console.log('5.canplay');
})
video.addEventListener('play', () => {
    console.log('play');
})
video.addEventListener('playing', () => {
    console.log('playing');
})
video.addEventListener('pause', () => {
    console.log('pause');
})
video.addEventListener('seeking', () => {
    console.log('seeking');
})
video.addEventListener('seeked', () => {
    console.log('seeked');
})
video.addEventListener('ended', () => {
    console.log('ended');
})
video.addEventListener('error', () => {
    console.log('error');
})
video.addEventListener('timeupdate', () => {
    let current = video.currentTime;
    console.log('timeupdate', current);
})

video {
    width: 100%;
    aspect-ratio: 16/9;
}

<video src="./video/alizee.mp4" controls preload poster="../imgs/alizee.jpg">您的浏览器不支持video标签</video>

window.onload = function () {
    let pre = document.querySelector(".pre");
    pre.loop = true;
    pre.addEventListener('mouseover', () => {
        pre.controls = true;
        pre.play();
    })
    pre.addEventListener('mouseout', () => {
        pre.controls = false;
        pre.pause();
    })
}