当前位置： 文江博客话题详情

HTML 5 视频拉伸

发布于 2024-09-24 15:25:32 字数 74 浏览 1 评论 0原文

你能让视频“拉伸”到宽度和宽度吗？视频元素的高度？显然，默认情况下，视频会被缩放和缩放。按比例安装在视频元素内。

谢谢

原文

Can you make a video "stretch" to the width & height of the video element? Apparentlyby default, video gets scaled & fitted inside the video element, proportionally.

thanks

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（6）

飞烟轻若梦 2024-10-01 15:25:43

最主要的是设置 object-fit 属性来填充视频组件，然后您可以在视频封面中选择任意长宽比值

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>

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>

回复 原文
横笛休吹塞上声 2024-10-01 15:25:42

这不会改变视频的比例，但如果您的浏览器不支持 object-fit:cover，则会消除视频查看器顶部、底部或侧面难看的“未填充”空间风格。

假设您有一个尺寸为 500x281 的页内查看器（从 1280x720 适当调整大小）。但有时您可能会看到比例不正确的 16:9 视频，例如 1278x720 或 320x176，就像 W3C 网站上的“Buck Bunny”视频一样。如果视频完全填满容器，并且您不必为每个比例不正确的视频创建一个新容器，那就太好了。

给定如下代码片段：

<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>

将渲染顶部和底部带有黑色或白色线条的视频，具体取决于浏览器处理object-fit的方式。添加以下 JavaScript，以动态调整视频容器的高度大小，通过强制视频容器匹配视频（至少在垂直方向上）来消除这些线条。

<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>

我们将容器的当前宽度除以确定的视频流宽度，然后乘以确定的视频流高度。这就决定了容器需要多大的高度才能尽可能地完全配合。

除了 CSS 定义之外，将视频高度和宽度设置为 HTML 中的属性也很重要。

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.

回复 原文
季末如歌 2024-10-01 15:25:41

还有object-fit CSS 属性，这可能会给你你所需要的。

顺便说一句，我认为这个请求与 如何使 HTML 5 视频播放适合框架而不是保持宽高比？ .

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? .

回复 原文
思慕 2024-10-01 15:25:40

这对我来说非常有效

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

$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 */
 });

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 */
 });
回复 原文
纵情客 2024-10-01 15:25:38

来自：

视频内容应在元素的播放区域内呈现，以便视频内容以完全适合播放区域的最大可能尺寸显示在播放区域的中心，同时保留视频内容的宽高比。因此，如果播放区域的宽高比与视频的宽高比不匹配，视频将显示为信箱式或邮筒式。元素播放区域中不包含视频的区域不代表任何内容。

没有用于拉伸视频而不是信箱化的规定。这可能是因为拉伸会给用户带来非常糟糕的体验，而且大多数时候并不是预期的效果。默认情况下，图像会被拉伸以适合，因此，您会在网上看到许多严重扭曲的图像，很可能是由于指定高度和宽度时的简单错误所致。

您可以使用 CSS 3 变换 实现拉伸效果，尽管这些不是完全标准化或在所有浏览器中实现，以及实现它的浏览器，您需要使用供应商前缀，例如 -webkit- 或 -moz-。这是一个例子：

<!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>

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>
回复 原文
街角卖回忆 2024-10-01 15:25:37

我已经使用 object-fit: fill in CSS 进行了测试，

效果很好。

video {
  object-fit: fill;
}

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

object-fit CSS 属性指定被替换元素的内容应如何适合由其使用的高度和宽度建立的框。

值： fill

替换内容的大小适合填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。

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.

回复 原文
~没有更多了~

关于作者

忆梦

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文