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