我要评论可以使用 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视频帧做封面内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论