css - VideoJs 宽高问题

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 的控制栏，我认为他们不希望这样。

p>

我也试过使用某些 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)并 overflow hidden 。 video 元素现在只需要填充父元素的宽度就可以了。

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

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

你可以看看我的CodePen看看结果如何。