代码之家 › 专栏 › 技术社区 › xendi

Videojs响应灯箱不工作

video.js lightbox html css javascript

xendi · 技术社区 · 8 年前

我需要一种方法来弹出一个灯箱,并保持它的反应。我发现了以下帮助程序代码: https://github.com/rudkovskyi/videojs_popup

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(不可接受)。

1 回复 | 直到 8 年前

misterben 8 年前

如果删除 .video-js .vjs-tech ,来自视频元素的高度、宽度和样式属性,并使用视频。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