前端截取视频第一帧作为封面
生活随笔
收集整理的這篇文章主要介紹了
前端截取视频第一帧作为封面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
概述
1.做項目的時候突然想截取視頻第一幀，作為視頻的封面，然后搜了很多博客都發現得到空白的圖片，最后得到了解決。
2.方法：通過創建canvas標簽，利用其drawImage() 方法在畫布上繪制該視頻，然后運用toDataURL方法轉換canvas上的圖片為base64格式，并將base64格式的圖片作為video標簽的poster屬性。
3.瀏覽器：chrome
代碼關鍵
video.currentTime = 1currentTime 屬性設置或返回視頻播放的當前位置（以秒計）。當設置該屬性時，播放會跳躍到指定的位置。一定要設置該屬性，不然會得到空白的圖片。
知識點
video.onloadeddata
onloadeddata 事件在當前幀的數據加載完成且還沒有足夠的數據播放視頻/音頻（audio/video）的下一幀時觸發。在當前幀的數據可用時執行相應 JavaScript代碼。
canvas.toDataURL
是返回一個包含圖片展示的 數據URL。可以使用 type 參數其類型，默認為 PNG 格式。圖片的分辨率為96dpi。
video.setAttribute(‘crossOrigin’, ‘anonymous’)
canvas無法對跨域的圖片進行操作，這樣解決了跨域問題。
完整代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls"><source src="./0130_1.mp4"></video><div id="output"></div><script type="text/javascript">(function(){var video, output;output = document.getElementById("output");var canvas = document.createElement('canvas')var img = document.createElement("img");video = document.getElementById('video')video.setAttribute('crossOrigin', 'anonymous')video.currentTime = 1 canvas.width = video.clientWidthcanvas.height = video.clientHeightvideo.onloadeddata = (() => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL('image/png')img.src = dataURL;img.width = 400;img.height = 300;output.appendChild(img);})})();</script></body> </html>總結
以上是生活随笔為你收集整理的前端截取视频第一帧作为封面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue-video-player 一款v
- 下一篇： 纯前端播放文件流视频并预览并截取视频第一