JavaScript与HTML5 Video API交互从视频中截取当前播放画面

// 假设video元素的id为"my-video"
var video = document.getElementById('my-video');
 
// 确保视频已经加载了足够的数据
video.addEventListener('loadeddata', function() {
    // 当视频的loadeddata事件触发时，意味着足够的数据已经加载了，可以进行截图
    screenshotVideo(video);
});
 
function screenshotVideo(videoElement) {
    // 创建canvas元素，并设置为和视频相同的尺寸
    var canvas = document.createElement('canvas');
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
 
    // 在canvas上绘制视频的当前帧
    var ctx = canvas.getContext('2d');
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
 
    // 将canvas转换为Base64图片格式
    var imgData = canvas.toDataURL('image/png');
 
    // 创建一个Image元素来展示截图
    var img = new Image();
    img.src = imgData;
 
    // 将Image元素添加到DOM中
    document.body.appendChild(img);
}

这段代码首先监听了loadeddata事件，以确保视频数据已经加载完毕。然后，它创建了一个canvas元素，并在视频的当前帧上调用drawImage方法来进行绘制。最后，它使用toDataURL方法将canvas内容转换为Base64编码的图片格式，并创建一个Image元素来展示这张图片。