js截取video视频某一帧做封面的简单案例(附完整代码)
作者：平淡才是真_6210
最近碰到一个需求,要求获取video视频某一帧做封面图片,这里给大家总结下,这篇文章主要给大家介绍了关于js截取video视频某一帧做封面的简单案例,需要的朋友可以参考下
可以使用 canvas元素来截取视频某一帧并生成封面。
首先，在 video 标签上设置视频源地址和自动播放属性：
<video src="video.mp4" autoplay></video>
然后，在 canvas 标签上定义宽高和样式，并通过 JavaScript 获取视频元素和 canvas 元素：
<canvas width="640" height="360" style="display:none;"></canvas>
<script>
const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
</script>
接着，定义一个函数来截取视频某一帧，并将其渲染到 canvas 上：
<script>
function captureFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
在需要生成封面的地方调用该函数即可：
<button onclick="captureFrame()">生成封面</button>
最后，将 canvas 元素转换为图片元素并插入到页面中：
<script>
function captureFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
const img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
}
</script>
完整代码如下：
<video src="video.mp4" autoplay></video>
<canvas width="640" height="360" style="display:none;"></canvas>
<button onclick="captureFrame()">生成封面</button>
<script>
const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function captureFrame() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
const img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
}
</script>附：js截取视频第一帧作为封面
在vue的v-for循环中，直接video标签进行列表渲染时，滚动列表页面会很卡，所以最好以img标签渲染视频封面图，点击后再播放视频。
具体代码如下：
//取视频的第一帧作为封面
function cutPicture(item) { //这里的item是列表的每一项
let video = document.createElement("video");
video.style = "position:fixed; top: 9999px;left:9999px;z-index:-9999";
video.preload = "metadata";
video.currentTime = 1; //截取的视频第一秒作为图片
video.src = item.videoUrl;
video.setAttribute("crossOrigin", "anonymous");
video.width = 113;
video.height = 75;
document.body.appendChild(video);
video.onloadeddata = function () {
let canvas = document.createElement("canvas");
canvas.width = 113;
canvas.height = 75;
canvas.getContext("2d").drawImage(video, 0, 0, video.clientWidth, video.clientHeight);
var oGrayImg = canvas.toDataURL("image/jpeg");
item.imgUrl = oGrayImg; //这里输出的imgUrl就是视频的封面图
this.remove();
};
return item;
}
总结
到此这篇关于js截取video视频某一帧做封面的文章就介绍到这了,更多相关js截取video视频帧做封面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！