JW播放器7與FancyBox 3集成

我一直在嘗試下午的大部分時間，但只是不能得到這個工作。我試圖讓玩家JW與V7的fancybox工作3JW播放器7與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>

會超欣賞一些幫助。謝謝。

來源

2017-04-12 John Macpherson

也許這掛'='在'event.preventDefault（）; ='正在製造麻煩 – GavinBrelstaff

這不是我的實際代碼，而是我在那裏的錯，對不起！任何其他想法？ p.s感謝您的快速回復。 –

你應該看看v3的Fancybox文檔 - 實現似乎已經改變了一些罪CE早期版本：

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" 
     }); 
     } 
    } 
    });  
}); 
});

來源

2017-04-17 09:32:21 jherrieven

精彩的作品，很好的chuffed，謝謝！ –

jQuery的期望你這樣的腳本在良好的同步加載運行ready功能 - 這樣試試這個改變這些行：

<script> 
$(function() {

到

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

來源

2017-04-13 15:49:49 GavinBrelstaff

不幸的是沒有這樣的運氣。我添加了類型：'mp4'，這使得FancyBox返回了一個不同的消息（「所請求的內容無法加載」），而不添加類型'mp4'。這是暗示什麼？ –

也許它是您需要的服務器上的MIME類型的mp4配置。 – GavinBrelstaff

一個獨立的視頻播放好了，我已經把我的進展放在這裏view-source：https：//johnmacpherson.com/jw/jwplayer-lightbox-THREE.html –

的fancybox V3.0沒有「afterShow 「回調，使用」移動之後「或」onComplete「回調

來源

2017-04-14 06:40:14 Janis

我試過onComplete和afterMove。沒有快樂。我已將當前代碼放在這裏https://johnmacpherson.com/jw/jwplayer-lightbox-THREE.html –

您是否聽說過jsFiddle的Codepen？ – Janis

JW播放器7與FancyBox 3集成

回答

相關問題