<video id="video"controls="controls">
<source src="./video/2.mp4" type="video/mp4" />
</video>
（2）视频加载后获取视频的长度
varelevideo = document.getElementById("video")
elevideo.addEventListener('loadedmetadata', function () {//加载数据
//视频的总长度 console.log(elevideo.duration)
})
（3）视频开始播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('play', function () {//播放开始执行的函数
console.log("开始播放")
})
（4） 视频正在播放中
varelevideo = document.getElementById("video")
elevideo.addEventListener('playing', function () {//播放中console.log("播放中")
})
（5）视频加载中
varelevideo = document.getElementById("video")
elevideo.addEventListener('waiting', function () {//加载
console.log("加载中")
})
（6）视频暂停播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('pause', function () {//暂停开始执行的函数
console.log("暂停播放")
})
（7）视频结束播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('ended', function () {//结束
console.log("播放结束")
}, false)
elevideo.addEventListener('loadedmetadata', function () {
//加载数据//视频的总长度console.log(elevideo.duration)
})
elevideo.addEventListener('play', function () {
//播放开始执行的函数console.log("开始播放")
})
elevideo.addEventListener('playing', function () {
//播放中 console.log("播放中")
})
elevideo.addEventListener('waiting', function () {
//加载console.log("加载中")
})
elevideo.addEventListener('pause', function () {
//暂停开始执行的函数console.log("暂停播放")
})
elevideo.addEventListener('ended', function(){
//结束console.log("播放结束")
}, false)
在JS中获取video标签，并监听它的loadeddata事件。loadeddata是指当媒体当前播放位置的帧完成加载时触发该事件，通常是第一帧。
在监听 loadeddata 中指定事件触发时执行的函数，我们的实现截取第一帧就在这里面编写。
首先定义创建一个 canvas 标签；其次指定 canvas 标签的宽高；最后调用canvas元素中的getContext方法。
