JavaScript 自动获取视频封面图片 | HTML5 视频元数据操作

要自动获取视频封面图片，你可以使用HTML5的<video>元素和JavaScript来实现。以下是一个简单的示例：\n\nHTML:\nhtml\n<video id="myVideo" width="320" height="240" controls>\n <source src="video.mp4" type="video/mp4">\n Your browser does not support the video tag.\n</video>\n\n\nJavaScript:\njavascript\nvar video = document.getElementById('myVideo');\n\nvideo.addEventListener('loadedmetadata', function() {\n var canvas = document.createElement('canvas');\n canvas.width = video.videoWidth;\n canvas.height = video.videoHeight;\n \n var context = canvas.getContext('2d');\n context.drawImage(video, 0, 0, canvas.width, canvas.height);\n \n var image = new Image();\n image.src = canvas.toDataURL();\n \n // 在这里可以使用image对象，比如将其添加到页面上显示\n document.body.appendChild(image);\n});\n\n\n在这个示例中，我们首先获取了<video>元素，并添加了一个loadedmetadata事件监听器。当视频元数据加载完成后，事件监听器会执行，然后我们创建一个<canvas>元素，设置其大小和视频大小一致。接着，我们将视频的帧绘制到<canvas>上下文中，并使用toDataURL()方法将<canvas>内容转换为Base64编码的图像数据。最后，我们创建一个新的<img>元素，并将其src属性设置为图像数据，然后将其添加到页面上显示。\n\n这样就可以实现自动获取视频封面图片的功能了。