VideoJs 宽高问题

Question

我正在尝试处理视频并将其呈现在网站上。

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

视频的原始高度和宽度为 960 x 540，他们希望在网站上以少 1/3 的高度呈现，视频为全宽（外部无黑边）。

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

他们给我看了这样的例子： http://pillar.mediumra.re/home-landing-service-3.html但是没看懂header上的视频是从初始值裁剪的，而且使用了object-fit，在IE11等不支持

在 css 中还有什么我可以做或改变的来完成这项工作吗？

我尝试在 VLC 中重新缩放视频并使用它，但它变得像素化，当我执行 videojs class vjs-16-9 时，它将与上一个视频的高度相同。

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

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

/* 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 宽高问题

VideoJs Width Height Issue

css

video.js