2017-08-22 58 views
0

我需要一种方式来弹出VideoJS灯箱并保持响应。我找到了以下帮手代码:https://github.com/rudkovskyi/videojs_popup。完善!除了当我使用最新版本的Videojs时,它不能正常工作。我得到:Videojs响应式灯箱不工作

VIDEOJS: ERROR: Improper value "auto" supplied for for width 
video.js:489 VIDEOJS: ERROR: Improper value "auto" supplied for for height 

在控制台,它卷起来部分破裂。代码在这里:

<html> 
    <head> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="https://vjs.zencdn.net/6.2.5/video-js.css" rel="stylesheet"> 
    <!-- Magnific Popup core CSS file --> 
    <link rel="stylesheet" href="css/magnific-popup.css"> 

    <!-- jQuery 1.7.2+ or Zepto.js 1.0+ --> 
    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script src="https://vjs.zencdn.net/6.2.5/video.js"></script> 
    <!-- Magnific Popup core JS file --> 
    <script src="js/jquery.magnific-popup.min.js"></script> 
    <meta content=""> 
    <style></style> 
    <script> 
     videojs.options.flash.swf = "video-js.swf"; 
     $('document').ready(function(){ 
     $('.open-popup-link').magnificPopup({ 
      type:'inline', 
      midClick: true 
     }); 
     $('.open-popup-link').on('click',function(){ 
      videojs('example_video_1').play(); 
     }) 
     }) 
    </script> 
    <style> 
     .video-js .vjs-tech { 
     position: relative; 
     height: inherit; 
     } 
     .player { 
     width: 80%; 
     margin-left: auto; 
     margin-right: auto; 
     background:black; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="galleryItem"> 
     <a href="#test-popup" class="open-popup-link">test</a> 
     <div id="test-popup" class="player mfp-hide" style="color:#FFF"> 
     <video id="example_video_1" class="video-js vjs-default-skin" controls preload="metadata" width="auto" height="auto" style="width:100%" data-setup=''> 
      <source src="http://vjs.zencdn.net/v/oceans.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> 
     </div> 
     <h3>One</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p> 
    </div> 

    </body> 
</html> 

我试着摆弄各种CS和VideoJS属性,但没有喜悦。以下是弹出脚本的开发人员的示例:https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html但我认为它使用的是较旧版本的videojs(不可接受)。

回答

0

如果删除规则.video-js .vjs-tech这工作,高度,宽度和样式从视频元素的属性,并使用了Video.js的流体模式,而不是:

<video id="example_video_1" class="video-js vjs-default-skin vjs-fluid" controls preload="metadata" data-setup=''> 

http://jsbin.com/qajeqim/edit?html,output