html - 画布和视频 - HTML5

Question

我看到您无法拉伸视频以适应窗口大小。它保持纵横比。

我可以通过画布播放视频，你不能用画布吗？画布在哪里伸展以适合窗户？

这似乎是合乎逻辑的

Answer 1

是的，使用 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/

Answer 2

不过，您可以使用 video.js API，您可以选择 :)

链接到 video.js（当然它是开源的）