一、方法一

通過創建canvas標簽，利用其drawImage() 方法在畫布上繪制該視頻，然后運用toDataURL方法轉換canvas上的圖片為base64格式，并將base64格式的圖片作為video標簽的poster屬性。toDataURL具有跨域問題。

注意：canvas無法對跨域的圖片進行操作，需要提前處理好跨域問題

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.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);});})}

二、方法二

可以選擇使用第三方平臺實現。七牛云、阿里云等云端存儲平臺功能強大，不僅具有海量的存儲功能，平臺封裝的還有很多功能豐富的API。若使用七牛云，以七牛云平臺為例，說明一下視頻截取方法

http://xxx.clouddn.com/test.mp4

如果想要實現截取視頻的某一幀其實很方便，只需在視頻的url后面這樣拼接即可

http://xxx.clouddn.com/test.mp4?vframe/jpg/offset/8/w/300/h/200

其中“jpg”為生成圖片的格式，‘8’為截取視頻第8秒的截圖，“w”為寬度300px，“h”為高度200px 。

總結

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

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