当窗口大小改变时，使videoJS实例缩放

Question

这是一个非常基本的问题，但我已经冥想了好几天但没有成功。

我有一个Electron桌面应用程序，允许用户选择要播放的本地视频。我希望能够为视频指定div，并且视频的大小受到限制，比例（例如保持宽高比），大小为videojs。如果用户更改窗口大小，我还需要拥有视频比例，例如通过使应用程序全屏显示。

到目前为止，我已经能够使视频居中，但当窗口大小发生变化时，视频大小保持不变（下图）。

我尝试添加data-setup='{"fluid": true}' CSS类（vjs-16-9，vjs-4-3）并尝试使用 .video-center { margin-left: auto !important; margin-right: auto !important; height: 100%; } ，但这些会导致视频占据整个窗口。< / p>

所以要点：我如何指定我希望视频 height 占据屏幕的一定百分比 - 比如说40％，让它解决宽度的正确宽高比，然后当窗口大小会改变，重新计算吗？

  <div class="videocontent">
    <video id="video-player" class="video-js vjs-default-skin vjs-hidden video-center"  controls>
    </video>
  </div>

{{1}}

窗口模式：

全屏模式：

Answer 1

替换 Videojs

我建议删除 Videojs ，并使用以下说明生成自定义代码。

设置<video>元素宽度和高度属性。

<video width="991" height="557"></video>

我们已经明确指定了width元素的height和<video>属性。我们只会使用这些值来初步确定正确的宽高比。 请参阅下面的Javascript代码：

将父容器宽度设置为您心脏的内容

.videocontent {
    width: 80%;
    /* for horizontal centering (optional) */
    margin-right: auto;
    margin-left: auto;
}

在您的信息页中加入 jQuery 。

    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

自定义 Javascript 以处理动态宽高比。

// Find all <video> element
var $allVideos = $('video'),

  // The element that is fluid width
  $fluidEl = $('.videocontent');

// Figure out and save the aspect ratio for each <video> element on the page
$allVideos.each(function() {

   $(this)
    // values from <video> height and width attributes
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

 });

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all <video> according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

Credit Fluid Width YouTube Videos