JS获取视频第一帧图片|极客笔记

JS获取视频第一帧图片

在网页开发中，我们经常会遇到需要获取视频第一帧图片的需求，比如在视频列表中显示视频缩略图等。在这篇文章中，我们将详细讨论如何使用JavaScript来获取视频的第一帧图片。

HTML代码

首先，我们需要在HTML中添加一个video标签来展示视频。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Thumbnail</title>
</head>
<body>
    <video id="video" width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <img id="thumbnail" src="" alt="Thumbnail">
</body>
</html>

在上面的代码中，我们通过video标签展示了一个视频，并使用img标签来展示视频的第一帧图片。

JavaScript代码

接下来，我们来编写JavaScript代码来获取视频的第一帧图片。我们可以利用HTML5的Canvas元素来实现这个功能。以下是完整的JavaScript代码：

const video = document.getElementById('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const thumbnail = document.getElementById('thumbnail');

video.addEventListener('loadeddata', () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    thumbnail.src = canvas.toDataURL();
});

在上面的代码中，我们首先获取video和thumbnail元素，然后监听video元素的loadeddata事件。在事件处理函数中，我们创建一个Canvas元素，设置其大小为视频的宽高，并使用Canvas的drawImage方法将视频的第一帧绘制到Canvas上。最后，我们将Canvas转换为base64格式的图片URL，赋值给thumbnail元素的src属性，从而显示视频的第一帧图片。