前端視頻截圖的方法

• 前端視頻里面截圖可以通過canvas.drawImage()方法去實現(xiàn)截取視頻中的某一個時間的截圖的圖片。

<video id="video" controls width="500" height="200" autoplay><source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'><source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/ogg'><source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/webm'></video><canvas id="myCanvas"></canvas><script>var myCanvas = document.getElementById('myCanvas');var c = myCanvas.getContext("2d")var video = document.getElementById('video');setTimeout(() => {myCanvas.height = video.heightmyCanvas.width = video.width//在畫布上定位圖像，并規(guī)定圖像的寬度和高度：c.drawImage(video, 0, 0, myCanvas.width, myCanvas.height)}, 3000);</script>

• 左邊為視頻 右邊為三秒后自動截取的圖片

總結(jié)

以上是生活随笔為你收集整理的前端视频截图的方法canvas.drawImage()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。