Question

我正在制作一个以后台视频为主要功能的Web应用程序。我设法通过在侧面上留一些黑条来防止宽高比，使视频适合整个屏幕（我需要显示整个视频，我不想截断一部分）。

当宽度不够时会发生这种情况

当高度不足时会发生这种情况

这就是我希望它实际执行的操作，只有一个问题。您在两张图片上都能看到的消息来自videojs-overlay插件，该插件将消息对齐在所需位置（在本例中为顶部）。并且要对齐这些消息，它会占据整个视口，而不是视频的播放位置。

我希望这种情况发生

这是我的实际代码：

f = 0; // start with 0 equals
for(i=0;i<n;++i)
{
    if(a[0] == a[i])
    {
        f += 1; // add 1 when finds pair of equals
        // break; // don't break: look at **ALL** elements
    }
}
if(f == n) /* if total pairs is total elements */
printf("All elements are same");

我尝试了对象拟合，流畅的宽高比，但似乎没有任何效果另一幅图片解释了我想做什么：

我希望在维护宽高比时将蓝色正方形变成红色正方形

Answer 1

您可以尝试这个。

.video-js.videoContainer video {
   display: block;
   min-height: 100%;
   min-width: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
   width: auto;
   height: auto;
}

或者甚至是视频元素上的这个：

object-fit: cover;

Answer 2

如果您不关心宽高比，则object-fit: fill;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
    <script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
    <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
    <title>Videojs Dailymotion</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    .videoContainer
    {
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
padding-top: 50%;
    }
    .videoContainer video
    {
    min-width: 100%;
    min-height: 100%;
    object-fit: fill; /*Added property*/
    }
    .video-js .vjs-control-bar,
    .video-js .vjs-big-play-button,
    .video-js .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(43, 51, 63, 0);
    }
    </style>
  </head>
  <body>
    <video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
      <source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">

    </video>
    <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
    <script>
    var player = videojs('vid1',{
    controls: true,
    posterImage: false,
    textTrackDisplay: false,
    loadingSpinner: false,
    controlBar: {
    fullscreenToggle: false,
    progressControl: false,
    remainingTimeDisplay: false
    }
    });
    player.overlay({
    content: '<strong>Default overlay content</strong>',
    overlays: [{
      align: "top",
      content: 'This event-triggered overlay message appears when the video is playing',
      start: 'play',
      end: 'pause'
    }]});
    </script>
  </body>
</html>

Answer 3

我终于得到了想要的东西。

.container {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.wrapper {
width: 100%;
max-width: calc(100vh / 0.5625);
padding-bottom: (9 / 16) * 100%;
top: 50%;
left: 50%;
background-color: deepskyblue;
}

<video id="vid1" class="video-js vjs-default-skin" style="width:100%;height:auto; position: relative;" controls>
      <source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
    </video>

以此，我可以保持视频的宽高比，同时使播放器保持在视频内容上。唯一的问题是视频不在屏幕上居中。感谢大家的帮助！

如何使视频播放器适合其内容？

3 个答案: