畫布和視頻 - HTML5

Question

我看到您無法拉伸視頻以適合窗口大小。它保持縱橫比。

我可以通過畫布播放視頻，不能用畫布做它？帆布伸展到適合窗戶的位置？

這似乎是合乎邏輯的是它的工作

Answer 1

可以使用的Video.js API，而不是不過，您的選擇:)

Link to video.js（這是當然的開源）

Answer 2

是的，很容易用drawImage的可選參數指定寬度和高度。例如：

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

var myVideo = document.createElement('video'); 
// Video tags usually have more than one source. Not all browsers can play Ogg/Theora 
myVideo.src = "http://upload.wikimedia.org/wikipedia/commons/2/2f/Mockingbird_Spring.ogv"; 
myVideo.autoplay = true; 
myVideo.loop = true; 


setInterval(function() { 
    // video is 1280 x 720 but I am stretching it to 400x20 
    ctx.drawImage(myVideo, 0, 0, 400, 20); 
    // Also draw it normally 
    ctx.drawImage(myVideo, 0, 100, 128, 72); 
}, 10) 

活生生的例子：http://jsfiddle.net/simonsarris/zwwyd/