前端截取视频第一帧作为封面
生活随笔
收集整理的這篇文章主要介紹了
前端截取视频第一帧作为封面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述
1.做項(xiàng)目的時(shí)候突然想截取視頻第一幀，作為視頻的封面，然后搜了很多博客都發(fā)現(xiàn)得到空白的圖片，最后得到了解決。
2.方法：通過創(chuàng)建canvas標(biāo)簽，利用其drawImage() 方法在畫布上繪制該視頻，然后運(yùn)用toDataURL方法轉(zhuǎn)換canvas上的圖片為base64格式，并將base64格式的圖片作為video標(biāo)簽的poster屬性。
3.瀏覽器：chrome
代碼關(guān)鍵
video.currentTime = 1currentTime 屬性設(shè)置或返回視頻播放的當(dāng)前位置（以秒計(jì)）。當(dāng)設(shè)置該屬性時(shí)，播放會(huì)跳躍到指定的位置。一定要設(shè)置該屬性，不然會(huì)得到空白的圖片。
知識點(diǎn)
video.onloadeddata
onloadeddata 事件在當(dāng)前幀的數(shù)據(jù)加載完成且還沒有足夠的數(shù)據(jù)播放視頻/音頻（audio/video）的下一幀時(shí)觸發(fā)。在當(dāng)前幀的數(shù)據(jù)可用時(shí)執(zhí)行相應(yīng) JavaScript代碼。
canvas.toDataURL
是返回一個(gè)包含圖片展示的 數(shù)據(jù)URL?？梢允褂?type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi。
video.setAttribute(‘crossOrigin’, ‘a(chǎn)nonymous’)
canvas無法對跨域的圖片進(jìn)行操作，這樣解決了跨域問題。
完整代碼
<!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>總結(jié)
以上是生活随笔為你收集整理的前端截取视频第一帧作为封面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue-video-player 一款v
- 下一篇： 纯前端播放文件流视频并预览并截取视频第一