Question

我正在尝试使用视频并在网站上进行渲染。

我不允许出于法律原因发布视频，但对实际视频的宽度和高度有一些疑问。

视频的原始高度和宽度为960 x 540，他们希望在网站渲染时高度减少1/3，视频为全宽（外部没有黑条）。

我一直在解释，当您缩小高度时，宽度必须成比例，以便视频保持比例。

他们向我展示了这样的例子： http://pillar.mediumra.re/home-landing-service-3.html但未能理解标题上的视频是从初始值中裁剪出来的，并且使用了对象适合，这在IE11等中不起作用。

我还能做些什么或改变css以使其发挥作用。

我尝试在VLC中重新缩放视频并使用它，但它会得到所有像素，当我执行videojs类vjs-16-9时，它将与之前视频的高度相同。

此外，视频是一个18mb的视频，我尝试使用vimeo vjs插件代替减少带宽，但当你将鼠标悬停在视频上时，它会显示vimeo的控制栏，我认为他们不会想要这样。

我也试过玩某些css类'但它没有正确缩小（有黑条）。

/* Video Code Changes */
.video-js.vjs-fill{
 /* max-height:250px !important;   */
}   
.video-js .vjs-tech{
 /* max-height:75% !important;  */
}
/* end Video Code changes */

以下代码供参考（任何想法）：

 <video id="my-video" class="video-js vjs-default-skin vjs-16-9" preload="auto" poster="MY_VIDEO_POSTER.jpg"  data-setup='{"controls": false, "autoplay": true, "preload": "auto", "muted": true, "loop": true}'>

                            <source src="content/video/video_hi.mp4" type='video/mp4' >


                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>

Answer 1

一种解决方案是创建一个包装元素，让我们称之为.video-wrapper并将video标记放在其中。

<div class="video-wrapper">
  <video src="..." autoplay></video>
</div>

然后，您可以为包装元素指定首选高度，使其子项居中（类似于background-position: center）并隐藏溢出。 video元素现在只需要填充父元素的宽度，您应该完成。

.video-wrapper {
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.video-wrapper > video {
  width: 100%;
}

您可以查看我的CodePen，了解结果的效果。

Answer 2

他们理解我所解释的内容，他们想要的想法无法实现。

VideoJs宽度高度问题

2 个答案: