html video 视频加载 自动获取封面的完整代码 js实现

以下是一个使用JavaScript实现自动获取视频封面的完整HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>自动获取视频封面</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var video = document.getElementById('myVideo');
            video.addEventListener('loadedmetadata', function() {
                var canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                var context = canvas.getContext('2d');
                context.drawImage(video, 0, 0, canvas.width, canvas.height);
                var dataURL = canvas.toDataURL();
                document.getElementById('videoCover').src = dataURL;
            });
        });
    </script>
</head>
<body>
    <video id="myVideo" src="video.mp4" controls autoplay></video>
    <img id="videoCover" src="" alt="Video Cover">
</body>
</html>

在这个示例中，我们使用了jQuery来加载JavaScript，并使用了addEventListener函数在视频的loadedmetadata事件上添加了一个监听器。当视频元数据加载完成后，我们创建了一个canvas元素，并将其尺寸设置为视频的宽度和高度。然后，我们使用drawImage函数将视频的帧绘制到canvas上。最后，我们使用toDataURL函数将canvas的内容转换为Base64编码的图像数据URL，并将其设置为img元素的src属性，以显示视频封面图像。

请注意，这个示例中的视频文件路径为video.mp4，你需要将其替换为你自己的视频文件路径

html video 视频加载 自动获取封面的完整代码 js实现

html video 视频加载自动获取封面的完整代码 js实现