在canvas中繪製視訊
theme: channing-cyan
一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第1天,點選檢視活動詳情。
本文章知識:
1.在canvas中顯示video的當前幀畫面
開始動手實現功能
先建立一個html檔案,和準備要用到的視訊檔案
```html
``
這樣我們就建立好了一個 306px * 202px 的 video 和 canvas 標籤啦,緊跟著,我們的javascript獲取了video和canvas標籤並利用
getContext獲取到了畫布的上下文,用
addEventListener方法監聽 video 的播放事件,當視訊播發的時候,就把視訊幀利用
drawImage()` 畫到canvas中。
看看效果如何:
嗯?為什麼canvas中的畫面和video的畫面不一致呢,我們來分析一下上面寫的程式碼是在那個節點繪製video到canvas中的,是在
video.play()
被觸發的時候繪製了video,只繪製了一次,當前看到的canvas的畫面其實是video的第一幀,這就是為什麼video和canvas畫面不一致的原因。
解決canvas畫面和video畫面不一致的問題
1.既然現在只繪製一次顯示了一幀畫面,那我就執行好多好多次就好啦。
js
function loop() {
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
...
}
嗯,挺牛。
2.我們也可以用定時器來,設定間隔時間來定時繪製畫面。
```js function loop() { setInterval(() => { cav.drawImage(videoEle, 0, 0, canvasEle.width, canvasEle.height) }, 0) }
```
用了定時器畫面看著已經同步啦!
3.還有個API叫 requestAnimationFrame(), 也可以用來實現這個需求。
js
function loop() {
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
requestAnimationFrame(loop);
}
上面幾種方法有一個顯而易見的缺點就是,當視訊在停止播放的時候,還是會繼續執行繪製,所以我們要在視訊停止播放的時候也要停止畫布的繪製。
js
function loop() {
cav.drawImage(videoEle, 0, 0, canvasEle.width, canvasEle.height)
if(!videoEle.paused) {
requestAnimationFrame(loop)
return
}
}
paused返回true暫停
false播放
注意:因網路原因造成的緩衝狀態仍然是false。
至此,功能就簡單的實現了。如果你閱讀本文章覺得有不妥的地方可以評論留言給我。