Question

我想使用Video JS播放器发布视频，但无法根据不同的屏幕尺寸进行扩展。

在Video JS homepage上，演示视频会缩放（从970px到600px宽度）。但是，如果你点击了这个播放器，那么你得到的代码就是＃34;按钮不缩放。这是代码在行动：

http://www.casedasole.it/video/index.html

在嵌入代码中，指定了视频的大小（640 x 264），但演示页代码没有为video元素提供大小。我已经查看了视频js页面的来源，但是有太多的内容（13个脚本和4个样式表）来追踪使其可扩展的内容。还没有视频js论坛，所以他们recommend asking here。

有人知道怎么做吗？

Answer 1

它来自http://www.video-js.com/js/home.js l72

videojs("home_video", {"height":"auto", 
"width":"auto"}).ready(function(){
    var myPlayer = this;    // Store the video object
    var aspectRatio = 5/12; // Make up an aspect ratio

    function resizeVideoJS(){
      // Get the parent element's actual width
      var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
      // Set width to fill parent element, Set height
      myPlayer.width(width).height( width * aspectRatio );
    }

    resizeVideoJS(); // Initialize the function
    window.onresize = resizeVideoJS; // Call the function on resize
  });

Answer 2

您可以使用媒体查询使video.js播放器可扩展。在较小的屏幕上，通过媒体查询更改视频js控件的CSS。这对我有用。

如何使Video JS播放器（和视频）可扩展

2 个答案: