JW Player 7 与 FancyBox 3 集成

Question

下午的大部分时间我都在尝试，但就是无法正常工作。我正在尝试让 JW PLayer v7 与 FancyBox 3 一起工作。

到目前为止的代码.. fancybox 在叠加层方面工作，但视频不显示

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link  href="jquery.fancybox.css" rel="stylesheet">
<script src="jquery.fancybox.js"></script>
<script src="jwplayer-7.9.3.js"></script>
<script>jwplayer.key="key-in-here=="</script>

</head>

<body>

<a class="jwVideo" href="https://path-to-file.mp4">Preview</a>


<script>
$(function() { 

 $(".jwVideo").click(function(event) { //select class attribute jwVideo assigned to a tag

    $.fancybox.open({
        content: '<div id="video_container">Loading the player ...</div>',
        afterShow: function(){ 
            var playerInstance = jwplayer("video_container");
            playerInstance.setup({
               file: "http://path-to-s3-file.mp4"
            });
        }
    });

    event.preventDefault(); =
});

});
</script>

非常感谢您的帮助。谢谢

Answer 1

jQuery 期望您运行 ready 函数以便脚本以良好的同步方式加载 - 所以尝试更改这些行：

<script>
$(function() {

至

<script>
$(document).ready(function() {

Answer 2

fancyBox v3.0 没有"afterShow"回调，使用"afterMove"或"onComplete"回调

Answer 3

您应该查看 v3 的 Fancybox 文档 - 实施似乎与早期版本相比有所改变：

http://fancyapps.com/fancybox/3/docs/#inline

考虑到这一点，以下似乎工作正常：

$(document).ready(function() { 
 $(".jwVideoClick").click(function(event) {
   $.fancybox.open({
     src  : '<div style="width:400px;background-color:transparent;"><div id="video_container"></div></div>',
     type : 'inline',
     opts : {
       onComplete : function() {
         var playerInstance = jwplayer("video_container").setup({
           file: "http://path-to-s3-file.mp4",
           width:"100%",
           aspectratio:"16:9"
         });
       }
     }
  });    
 }); 
});

JW Player 7 与 FancyBox 3 集成

JW Player 7 with FancyBox 3 integration

jquery

fancybox

lightbox

jwplayer