如何使视频JS播放器(和视频)可伸缩

Question

我想发布视频使用视频JS播放器，但不能使它的规模，以响应不同的屏幕大小。

在视频JS主页上，演示视频刻度(看上去从970 to到600 to宽)。但是，如果你点击“嵌入这个播放器”按钮，你得到的代码不会缩放。下面是正在实施的代码：

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

在嵌入代码中，指定了视频的大小(640 X 264)，但是演示页代码没有给出video元素的大小。我已经查看了视频js页面的源代码，但是有太多的内容(13个脚本和4个样式表)无法跟踪是什么使其具有可伸缩性。也没有视频js论坛，所以他们建议你在这里问。

有人知道怎么做吗？

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。这对我有用。