home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

แสดงวิดีโอภายใน HTML5 Canvas

ใช้ drawImage() วาด Video Frame ต่อเนื่อง

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');

video.addEventListener('play', function() {
    var $this = this;
    (function loop() {
        if (!$this.paused && !$this.ended) {
            ctx.drawImage($this, 0, 0, canvas.width, canvas.height);
            setTimeout(loop, 1000 / 30); // ~30 FPS
        }
    })();
}, 0);

ประโยชน์

  • เพิ่ม Filter/Effect บนวิดีโอ (Canvas API)
  • Capture Frame เป็นรูปภาพ
  • Video Processing Real-time

Video ต้องมี crossorigin="anonymous" หากอยู่บนโดเมนต่างกัน