Question

我尝试使用视频HTML标记添加视频。

这是 CSS 我使用：

.video { 
width: 100%;
height: 500px;
-webkit-transform: scaleX(2); 
-moz-transform: scaleX(2);
}
.video:before {
background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat;
width:100%;
min-height:500px;
}

这是 HTML 我使用：

<div class="video">
<video width="1366" height="500" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>

我希望视频能够被拉伸（实际上是这样），但它的宽度有点太多而且超出了它。正如您在THIS图片中看到的那样，视频的宽度超出了边界，因此添加了水平滚动条。我希望有人可以帮我修复我的宽度问题。

And this is the webpage I'm working on..

Answer 1

来自规范：

视频内容应该在元素的播放区域内呈现，以便视频内容以尽可能大的视频内容显示在播放区域的中心，并保留视频内容的宽高比。因此，如果回放区域的宽高比与视频的宽高比不匹配，则视频将显示为letterboxed或pillarboxed。元素回放区域中不包含视频的区域不代表任何内容。

没有规定拉伸视频而不是信箱。这可能是因为拉伸会给用户带来非常糟糕的体验，并且大部分时间都不是预期的。默认情况下，图像会被拉伸以适应，因此，您会看到很多图像在线严重扭曲，很可能是由于指定高度和宽度时出现的一个简单错误。

您可以使用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>

Answer 2

从html中移除宽度和高度

<div class="video">
    <video autoplay loop muted>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    </video>
</div>

并按如下方式更改以下CSS：“

.video { 

        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-transform: scaleX(1); 
        -moz-transform: scaleX(1);
        }
        .video:before {
        background-image: url('http://farm8.staticflickr.com/7212/7329494986_c1191f6e55.jpg') repeat;
        width:100%;
        min-height:500px;
        }

Answer 3

html和css的变化

我发布了以下工作片段。

工作笔

<强> working pen

＆＃13;

   .video { 
   width: 100%;
   height: 500px;
   position:relative;
   /* -webkit-transform: scaleX(2);  */
  /* -moz-transform: scaleX(2); */
}
.video:before {
   background: rgba(0,0,0,0.5); /* You can use here image */
   width:100%;
   height:500px;
   content:'';
   position:absolute;
   top:0;
   left:0;
}

＆＃13;

<div class="video">
  <video width="100%" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>

＆＃13;

如何以HTML格式展示视频的宽度？

3 个答案: