![video]( "video")
本文介绍了是否有另一种模拟物体贴合的方式：填充视频元素，以便所有主流浏览器都能识别它？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有特定尺寸的视频。当我第一次尝试使用它时，浏览器会在两侧显示视频（以努力保持宽高比）。我应用了object-fit：fill属性，它适用于除I.E以外的每个我测试的浏览器。我甚至尝试使用polyfill（起初看起来很有希望）:( ），但我无法使它在视频上工作。我尝试过其他技术，例如制作视频包装类来缩放视频，但如果视频看起来很糟糕，我无法做到。有没有人有任何想法我可以实现这一点（可能通过JavaScript）？
以下是一些代码：
.video {height：1000px;宽度：100％; / *我在下面尝试了这一点，但在I.E中无效* / / * object-fit：fill; -o-object-fit：fill; overflow：hidden; * /} / *我也试过以下* / *。videowrapper {position：relative;宽度：100％; height：1000px;} .videowrapper video {width：100％;身高：100％; -webkit-transform：scaleX（2）; （我尝试了各种尺度，但没有一个看起来不错）-moz-transform：scaleX（2）; -ms-transform：scaleX（2）; transform：scaleX（2）; } * / < div class= videowrapper> ;< video id =videoclass =video>< source src =... / video.mp4type =video / mp4/>< source src =... / video.webmtype =video / webm/>< source src =... / video.oggtype =video / ogg/>< / video>
所以有人知道任何创意JS / JQuery甚至CSS方法我可以用来做这个工作？
解决方案
我最终使用了一个canvas标签：
document.addEventListener（'DOMContentLoaded'，function（）{var v = document.getElementById（'video'）; var canvas = document.getElementById（'canvas'）; var ctx = canvas.getContext （'2d'）; v.addEventListener（'loadedmetadata'，function（）{canvas.width = v.videoWidth; canvas.height = v.videoHeight;}）; video.addEventListener（'play'，function（）{var $ this = this; // cache（function loop（）{if（！$ this.paused&&！$ this.ended）{ctx.drawImage（$ this，0，0）; setTimeout（loop，1000 / 30）; // drawin g at 30fps}}）（）; }，0）; };
< canvas id =canvas style =width：100％; height：100％;>< video id =videocontrols =controlsclass =hiddenautoplay =autoplayloop =loopposter =images / video .JPG> < source src =video.mp4type =video / mp4/> < source src =video.webmtype =video / webm/> < source src =video.oggtype =video / ogg/> < /视频> < / canvas>
I have a video with specific dimensions. When I first try to use it, the browser letterboxes the video at the sides (in an effort to maintain aspect ratio). I applied the object-fit: fill property and it worked for every browser I tested on except I.E. I even tried to use a polyfill (which seemed promising at first):( https://github.com/anselmh/object-fit) but I could not get it to work on the video. I have tried other techniques such as making a video wrapper class a scaling the video, but I could not do it without the video looking horrible. Does anyone have any idea how I can achieve this (possibly through JavaScript)?Here is some code:
.video{
height:1000px;
width:100%;
/*I tried doing this below but does not work in I.E.*/
/*object-fit: fill;
-o-object-fit: fill;
overflow: hidden;*/
}
/*I have also tried the following*/
/*.videowrapper {
position: relative;
width: 100%;
height: 1000px;
}
.videowrapper video {
width: 100%;
height: 100%;
-webkit-transform: scaleX(2); (I tried various scales but none of them looked good)
-moz-transform: scaleX(2);
-ms-transform: scaleX(2);
transform: scaleX(2);
}*/
<div class"=videowrapper">
<video id="video" class="video">
<source src=".../video.mp4" type="video/mp4" />
<source src=".../video.webm" type="video/webm" />
<source src=".../video.ogg" type="video/ogg" />
</video>
</div>
So is anyone aware of any creative JS/JQuery or even CSS methods I can possibly utilize to make this work? Thank you.
解决方案
I ended up using a canvas tag instead:
document.addEventListener('DOMContentLoaded', function () {
var v = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
v.addEventListener('loadedmetadata', function () {
canvas.width = v.videoWidth;
canvas.height =
v.videoHeight;
});
video.addEventListener('play', function () {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);
});
<canvas id="canvas" style="width: 100%; height: 100%;">
<video id="video" controls="controls" class="hidden" autoplay="autoplay" loop="loop" poster="images/video.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
</video>
</canvas>
这篇关于是否有另一种模拟物体贴合的方式：填充视频元素，以便所有主流浏览器都能识别它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！