canvas截取多个视频的第一帧，第n秒画面

业务涉及视频预览，不点击视频则不播放而是先展示视频的画面给到用户

“因为本人特别喜欢梅艳芳，所以也留存了很多她的视频，这里就以她的视频做测试了”

截取多个视频的第一帧，使用：Promise+loadeddata事件+canvas

Promise来帮助我们顺序地拿到多个视频的第一帧画面

loadeddata事件的触发时机在MDN上是这样表述的：

事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。

所以如果我们想要获取第一帧，就可以使用loadeddata事件

可以直接把canvas写进该事件中【不过因为第一帧时机问题，会有右图所示的黑屏出现】

// 以三个视频举例子
let videoArr = ["./fengdejijie.mp4", "./xiyang.mp4", "./gushenzouwolu.mp4"]
videoArr.forEach((item) => {let img = document.createElement("img")getFirstImgBase64(item,400,240).then((res) => {img.src = res})document.documentElement.appendChild(img)
})// 将截取操作封装到一个函数中
function getFirstImgBase64(url, w, h) {// 返回一个Promsie，这样有助于我们顺序的拿到多个视频的画面return new Promise(function (resolve, reject) {let dataURL = ""let video = document.createElement("video")video.setAttribute("crossOrigin", "anonymous") //处理跨域，保证可以读取到视频video.setAttribute("src", url)video.setAttribute("preload", "auto") // 不设置该项就不会开启预先加载视频，那么拿到的会是黑屏// 第一帧加载完毕时调用video.addEventListener("loadeddata", function () {let canvas = document.createElement("canvas")canvas.width = w //canvas的尺寸————可以理解为画板的尺寸————最终img占据的大小canvas.height = h//绘制canvas，[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]//————宽度高度可以理解为绘制的图像的尺寸，和上面的画板canvas的尺寸做好区分canvas.getContext("2d").drawImage(video, 0, 0, w, h) dataURL = canvas.toDataURL("image/jpeg") //转换为base64resolve(dataURL)})})
}

下面来看看截取视频的第n秒的画面如何实现

其实可以从video的currentTime入手，设置video的currentTime来让canvas截取当前时刻的画面

通过设定视频的currentTime就可以大大降低截取的画面是黑幕的概率

不过要注意自己设置的【currentTime】不能超过视频的总长度也就是video的duration属性值

video.currentTime以及video.duration拿到的数据单位是【秒】，我们确定好第几秒即可

let videoArr = ["./fengdejijie.mp4", "./xiyang.mp4", "./gushenxiyang.mp4"]
videoArr.forEach((item) => {let img = document.createElement("img")getFirstImgBase64(item, 400, 240, 135).then((res) => {img.src = res})document.body.appendChild(img)
})
// 将截取操作封装到一个函数中（视频地址，画板/图像宽、高，目标时刻）
function getFirstImgBase64(url, w, h, targetTime) {// 返回一个Promsie，这样有助于我们顺序的拿到多个视频的画面return new Promise(function (resolve, reject) {let dataURL = ""let video = document.createElement("video")console.log(video.currentTime)video.src = urlvideo.crossOrigin = "anonymous"video.preload = "auto"// ★设定播放位置以获取当前播放位置的图像video.currentTime = targetTime// ★canplay事件——还没有加载足够的数据来播放媒体直到其结束，只加载了媒体当前位置的数据video.addEventListener("canplay", function () {console.log(video.duration, video.currentTime)let canvas = document.createElement("canvas")canvas.width = w //canvas的尺寸和图片一样canvas.height = hcanvas.getContext("2d").drawImage(video, 0, 0, w, h) //绘制canvas，[资源地址,绘制起始横坐标,绘制起始纵坐标,绘制宽度,绘制高度]dataURL = canvas.toDataURL("image/jpeg") //转换为base64resolve(dataURL)})})
}

canvas截取多个视频的第一帧，第n秒画面相关推荐

php 获取视频首帧,PHP获取视频的第一帧与时长
//获得视频文件的缩略图 function getVideoCover($file,$time,$name) { if(empty($time))$time = '1';//默认截取第一秒第一帧 $s ...
java 取视频第一帧,java获取视频的第一帧
//------------maven配置文件--------------- org.bytedeco javacv 0.8 /** * 获取指定视频的帧并保存为图片至指定目录 * @param vi ...
【前端】wangeditor源码修改，打包发布到npm，实现上传视频功能，得到视频的第一帧保存为封面，spring-boot+vue，axios实现文件上传，视频图片浏览
一.实现 1.创建git分支,clone下源码 git地址创建分支 2.图片上传具有文件选择的功能,所以我完全模仿(抄袭)图片上传报错不慌,全部改完就不报错了 1)在src/config/inde ...
查看视频的IPB帧，IPB帧编码顺序，视频的第一帧图片
> 如何查看视频的IPB帧 Android, 如何获取视频的每一帧的信息视频 = 图片.图像(摄像头) + 声音(麦克风) : 谷歌官方给我们的提供的api接口类:MediaMetadataR ...
如何获取网络视频（或者说后台返回视频URL）第一帧图片以及获取本地视频的第一帧图片
在项目开发的时候,有可能会有这样的一种需求:有一段视频需要展示给用户,在界面上先展示视频上的某一帧图片,用户点击的时候再去获取视频资源进行播放.这时,服务器会先给我们返回视频的url,这个时候就需要通 ...
关于Unity VideoPlayer组件视频切换第一帧卡顿
关于Unity VideoPlay组件视频切换第一帧卡顿的问题 1.问题: 在做项目时,发现VideoPlayer组件在多个视频切换时,会在第一帧重复上个视频的结束时的画面. 2.原因: 因为Vid ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
java 推流_JavaCV开发详解之2：截取推流服务器视频的某帧或本地视频的某帧
引入依赖 org.bytedeco javacv 1.5.3 org.bytedeco javacv-platform 1.5.3 代码实现 package com.java.mmzsblog; im ...
vue 获取上传视频的第一帧做为视频封面
上一篇文章记录了vue上传视频,接下来,需要在上传成功后截取视频第一帧做为视频封面. 截取视频第一帧具体实现如下: <template><div><div v-if=& ...

canvas截取多个视频的第一帧，第n秒画面

canvas截取多个视频的第一帧，第n秒画面相关推荐

最新文章

热门文章