画布和视频 - HTML5答案

【问题标题】：Canvas and Video - HTML5画布和视频 - HTML5
【发布时间】：2013-05-10 04:13:49
【问题描述】：

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

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

这似乎是合乎逻辑的

【问题讨论】：

如果你拉伸它并失去纵横比，它看起来会变形，你为什么要这样做？
是的，除此之外。我们有标牌解决方案，这就是客户想要的。给人们他们想要的东西..

标签： html canvas html5-video

【解决方案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/

【讨论】：

也可以考虑 requestAnimationFrame 这种方法
我同意 requestAnimationFrame 应该在生产中使用，但是你如何（或者即使）动画它取决于提问者，setTimeout 只是证明它有效的最懒惰的方式（不需要填充在垫片中）
是的，这是真的，只是认为我添加它，因为你的答案很好。

【解决方案2】：

不过，您可以改用 video.js API，由您选择：)

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

【讨论】：

这个api有这个确切的功能吗？让它适合屏幕而不保持宽高比？
我分享的网站上有一个使用该 API 的视频，你可以测试一下看看