HTML 5 Video stretch_问答_开发者_运维开发者技术经验分享

Can you make a video "stretch" to the width & height of the video element? Apparentlyby default, video gets scaled & fitted insi开发者_JS百科de the video element, proportionally.

thanks

I have tested by using object-fit: fill in CSS

Works good.

video {
  object-fit: fill;
}

From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Value: fill

The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

From the spec for <video>:

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

There are no provisions for stretching the video instead of letterboxing it. This is likely because stretching gives a very bad user experience, and most of the time is not what is intended. Images are stretched to fit by default, and because of that, you see lots of images which are badly distorted online, most likely due to a simple mistake in specifying the height and width.

You can achieve a stretched effect using CSS 3 transforms, though those aren't fully standardized or implemented in all browsers yet, and the ones in which it is implemented, you need to use a vendor prefix such as -webkit- or -moz-. Here's an example:

<!DOCTYPE html>
<style>
video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

This worked perfectly for me

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight =  _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
 $VideoElement.css({
    "transform-origin": "0% 0%",
    "transform":"scaleY(" + iScaleY +")",
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
    "-moz-transform-origin" : "0% 0%", /* Firefox */
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
    "-o-transform-origin":"0% 0%", /* Opera */
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */
 });

There is also the object-fit CSS property, which will likely give you what you need.

Incidentally, I think this request is realated to How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio? .

This won't change the proportion of your video but gets rid of ugly 'unfilled' spaces at the top and bottom or sides of your video viewer IF your browser doesn't support the object-fit:cover style.

Let's say you have an in-page viewer that's 500x281 (a proper resizing from 1280x720). But sometimes you may get a video that's not properly proportioned to exactly 16:9, say 1278x720 or 320x176 as in the case of the 'Buck Bunny' video on the W3C site. It would be nice if the video filled the container completely and you don't have to create a new container for every improperly proportioned video.

Given a code fragment like:

<style>
#vidcontent {
  width:500;
  height:281;
  border:2px solid #F00;
  object-fit:cover; /* for those who do support it */
}
</style>

<video id="vidcontent" width="500" height="281" autoplay controls loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

will render a video with black or white lines at the top and bottom depending on how your browser handles object-fit. Add the following JavaScript for an on the fly height resizing of the video container making those lines go away by forcing your video container to match the video, at least vertically.

<script type="text/javascript">
  vidContent = document.getElementById('vidcontent');
  vidContent.addEventListener("loadedmetadata", function(e) {
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
  }, false);
</script>

We divide the current width of the container by the determined width of the video stream then multiply by the determined height of the video stream. That results in what the height of the container needs to be to force as clean of a fit as possible.

It is important that the video height and width are set as attributes in the HTML in addition to the CSS definition.

The main thing is setting the object-fit property to fill for the video component, then you can choose any arbitrary values in the video-cover for the aspect ratio

video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.video-cover {
  width: 50vw;
  height: 30vw;
  margin: 2rem;
  background: #2c3e50;
}

<div class="video-cover">
  <video></video>
</div>

HTML 5 Video stretch

精彩评论

关注公众号

热门标签

图文推荐

HTML 5 Video stretch

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：