简单地利用canvas载入视频
生活随笔
收集整理的這篇文章主要介紹了
简单地利用canvas载入视频
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
canvas加載視頻和圖片是一樣的，使用drawImage，區別就是給一個定時器不停的抓取每幀的畫面，放入Canvas畫布里面，這個辦法有點簡單粗暴，原理為：監聽了video的play事件，并設置定時器，每20ms調用一次drawImage，當video的ended事件觸發時，清除定時器。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Test</title> </head> <body><video src="p03501roz02.p702.1.mp4" id="video1" width="270" controls autoplay></video><canvas id="myCanvas" width="270" height="135"></canvas><script>var v = document.getElementById('video1')var c = document.getElementById('myCanvas')var ctx = c.getContext('2d')// 每20ms畫一次圖v.addEventListener('play', function () {var i = window.setInterval(function () {ctx.drawImage(v, 0, 0, 270, 135);if (v.ended) {clearInterval(i)}}, 20)});</script> </body> </html>總結
以上是生活随笔為你收集整理的简单地利用canvas载入视频的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 陌初APP
- 下一篇： 两种方法用于检查传入的数字是否为整数