文章/答案/技术大牛

发布

社区首页 >问答首页 >Videojs Responsive Lightbox不工作

问Videojs Responsive Lightbox不工作
EN

Stack Overflow用户

提问于 2017-08-23 03:24:37

回答 1查看 1.3K关注 0票数 0

我需要一种方法来弹出VideoJS一个灯箱，并保持它的响应。我找到了下面的助手代码：https://github.com/rudkovskyi/videojs_popup。太棒了！除了我在最新版本的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属性，但没有效果。以下是popup脚本开发人员提供的工作示例：https://cdn.rawgit.com/rudkovskyi/videojs_popup/master/demo.html，但我认为它使用的是较旧版本的videojs (不可接受)。

javascript

css

html

lightbox

video.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-25 04:33:39

如果从视频元素中删除.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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45825465

复制

相似问题

问Videojs Responsive Lightbox不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Videojs Responsive Lightbox不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Videojs Responsive Lightbox不工作
EN