【问题标题】: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 的视频,你可以测试一下看看
猜你喜欢
  • 2016-09-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-01
  • 2014-12-03
  • 2012-08-28
  • 2013-04-20
  • 2023-03-18
相关资源
最近更新 更多