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代替，但您可以选择:)

Link to video.js（当然是开源的）

画布和视频 - HTML5

2 个答案: