純前端播放文件流視頻并預覽并截取視頻第一幀

1、把文件流轉為本地可以播放地址

調用getFileURL并傳入文件流會返回一個地址，將地址賦值給video的src即可播放視頻，無需上傳至服務器。

getFileURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url; },

2、截取視頻第一幀

調用getVideoBase64并將第一步得到的url轉給getVideoBase64即可得到視頻第一幀圖片，getVideoBase64返回的片為base64格式。

注釋：canvas.toDataURL(type, encoderOptions)中type為圖片格式，encoderOptions為圖片質量（取值為0-1），圖片格式為png圖片相對會大一些，如果圖片為jpeg那么圖片相對會小很多，圖片為jpeg轉換成base64長度會小很多，當然圖片質量越小base64長度也會越小。

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', 222);video.setAttribute('height', 148);video.setAttribute('controls', 'controls');video.currentTime = 1 //視頻時長，一定要設置，不然大概率白屏video.addEventListener('loadeddata', function(e) {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',0.3); //轉換為base64var img = document.createElement("img");img.src = dataURLvideo.setAttribute('poster', dataURL);resolve(dataURL);});}) }

總結

以上是生活随笔為你收集整理的纯前端播放文件流视频并预览并截取视频第一帧的全部內容，希望文章能夠幫你解決所遇到的問題。

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