javascript - JS 怎么获取视频第一帧作为封面图？？？

Question

JS 怎么获取视频第一帧作为封面图，网上找了很多方法，都是空白的。。。新手，求指点，跪谢~

Answer 1

需要将视频先解析，目前兼容性还不好，建议服务端做

Answer 2

就使用机器人提供的方案就可以了

let video = document.createElement('video');let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');// 视频源video.src = 'path/to/your/video.mp4';video.addEventListener('loadeddata', function() {    // 在视频数据加载完成后执行    canvas.width = video.videoWidth;    canvas.height = video.videoHeight;    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);    let imgDataUrl = canvas.toDataURL('image/png');    // 将imgDataUrl发送到服务器，或者直接使用它作为封面图});

Answer 3

<video id="myVideo" src="path/to/video.mp4" width="640" height="480"></video><canvas id="canvas" width="640" height="480"></canvas>const video = document.getElementById('myVideo');  const canvas = document.getElementById('canvas');  const context = canvas.getContext('2d');const videoWidth = video.videoWidth;    const videoHeight = video.videoHeight;  function getFirstFrame() {      video.addEventListener('loadeddata', function() {          context.drawImage(video, 0, 0, videoWidth, videoHeight);        });    }

这个呢

Answer 4

主要用到的技术是H5的video标签和canvas的绘制图片，思路就是将视频用video标签加载到指定的时间帧，然后再将video会知道canvas中即可。下面给出一个可行的实现代码，题主可以自行调试

function captureFrame(videoFile, time =0) {  const video =document.createElement('video');  video.currentTime = time; // 设置视频停留到指定时间帧  video.muted = true;  video.autoPlay = true; // 设置视频加载完后自动播放，这样才能加载到指定时间的画面  video.src = URL.createObjectURL(videoFile);  video.canplay = () => {    const canvas = document.createElement('canvas');    // 在视频数据加载完成后执行    canvas.width = video.videoWidth;    canvas.height = video.videoHeight;    const ctx = canvas.getContext('2d');    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);    let imgDataUrl = canvas.toDataURL('image/png');    // 将imgDataUrl发送到服务器，或者直接使用它作为封面图  };}

Answer 5

这种场景用浏览器 JS 并不合适，因为都要加载一部分视频，会对服务器和带宽带来不小的压力。

应该在服务器端生成截图和缩略图，然后直接加载缩略图作为 placeholder。

Answer 6

很遗憾听到你找不到有效的解决方案。在JavaScript中，获取视频的第一帧作为封面图需要使用HTML5的video API。以下是一个基本的示例：

let video = document.createElement('video');let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');// 视频源video.src = 'path/to/your/video.mp4';video.addEventListener('loadeddata', function() {    // 在视频数据加载完成后执行    canvas.width = video.videoWidth;    canvas.height = video.videoHeight;    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);    let imgDataUrl = canvas.toDataURL('image/png');    // 将imgDataUrl发送到服务器，或者直接使用它作为封面图});

这段代码首先创建一个video元素和一个canvas元素。然后，当视频的数据被加载后（即在'loadeddata'事件触发时），我们将视频画到canvas上，然后使用canvas的toDataURL方法将画转换为数据URL，可以用于作为封面图。

注意，这段代码假设你的视频文件已经存在于服务器上，且可以被浏览器访问。如果你正在尝试从用户设备上的文件读取视频，那么你可能需要使用不同的方法，例如使用HTML5的File API。