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

您应该查看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"
         });
       }
     }
  });    
 }); 
});

Answer 2

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

<script>
$(function() {

到

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

Answer 3

fancyBox v3.0没有＆＃34; afterShow＆＃34;回调，使用＆＃34; afterMove＆＃34;或者＆＃34; onComplete＆＃34;回调

JW Player 7与FancyBox 3集成

3 个答案: