批量截取后端接口返回視頻地址數據的第一幀作為封面展示在列表

我使用的是vue2的Mixins所抽離由此實現共用

1：創建myMinxins共用的js組件（由于項目中多個地方需要使用）

?2：第二步：創建函數 - 抽離第一幀代碼（可直接復制該函數代碼）

?代碼：

getVideoBase64(url) {return new Promise(function (resolve, reject) {let dataURL = "";let video = document.createElement("video");video.setAttribute("crossOrigin", "anonymous"); //處理跨域video.setAttribute("src", url);video.setAttribute("width", 400);video.setAttribute("height", 240);video.setAttribute("preload", "auto");video.setAttribute('crossOrigin', 'anonymous');video.addEventListener("loadeddata", function () {let canvas = document.createElement("canvas"),width = video.width, //canvas的尺寸和圖片一樣height = video.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(video, 0, 0, width, height); //繪制canvasdataURL = canvas.toDataURL("image/jpeg"); //轉換為base64resolve(dataURL);});})},

第三步：在需要的頁面組件中引入并調用myMixins中的抽離第一幀函數getVideoBase64

（1）：引入

import { myMixins } from '../../utils/myMixins'

（2）：掛載

mixins: [myMixins], //與生命周期 & data都是同級的位置

（3）：使用（調用myMixins中的抽離第一幀函數getVideoBase64）

例如：// res.data.currentClipList是一個數據 里面有多個對象數據res.data.currentClipList.forEach(item => {this.getVideoBase64(item.videoUrl).then((data) => { //videoUrl視頻keyitem.coverUrl = data //coverUrl 圖片key});});//處理完畢后將數據進行賦值渲染展示this.clipList = res.data.currentClipList;

到此封面圖片就會實現完畢了，(小問題：數據較多時候偶爾某個封面會產生未抽離到 — 再次刷新就會發現抽離到了)

總結

以上是生活随笔為你收集整理的批量截取视频第一帧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。