JW Player 7 avec intégration de FancyBox 3

J'ai essayé pendant la plus grande partie de l'après-midi, mais je n'arrive pas à faire fonctionner ça. Je suis en train d'obtenir JW PLayer v7 travailler avec FancyBox 3.JW Player 7 avec intégration de FancyBox 3

code jusqu'à présent .. Le fancybox fonctionne en termes de superposition, mais la vidéo ne montre pas

<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>

Est-ce que super apprécier un peu d'aide . Merci.

Source

2017-04-12 John Macpherson

Peut-être que la pendaison '=' 'dans event.preventDefault(); = 'fait des problèmes – GavinBrelstaff

Ce n'était pas dans mon code actuel mais ma faute d'être là, désolé! D'autres idées? p.s Merci pour une réponse rapide. –

Vous devriez consulter la documentation de Fancybox pour v3 - l'implémentation semble avoir quelque peu changé CE versions antérieures:

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

Ayant cela à l'esprit, ce qui suit semble fonctionner très bien:

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

Source

2017-04-17 09:32:21 jherrieven

Merveilleux qui fonctionne, Bien chuffé, merci! –

jQuery vous attend d'exécuter la fonction ready si les scripts chargent en bon synchronie - essayez donc de ce changement de ces lignes:

<script> 
$(function() {

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

Source

2017-04-13 15:49:49 GavinBrelstaff

Pas une telle chance, malheureusement. J'ai ajouté le type: 'mp4' et cela a fait une petite différence en ce que FancyBox a retourné un message différent ("Le contenu demandé ne peut pas être chargé") que sans ajouter le type: 'mp4'. Est-ce que cela suggère quelque chose? –

Peut-être que c'est une configuration mp4 de type mime sur le serveur dont vous avez besoin. – GavinBrelstaff

Une vidéo autonome joue ok, j'ai mis en place mes progrès ici view-source: https: //johnmacpherson.com/jw/jwplayer-lightbox-THREE.html –

FancyBox v3.0 n'a pas « Aftershow "callback, utilisez les callback" afterMove "ou" onComplete "

Source

2017-04-14 06:40:14 Janis

J'ai essayé onComplete et afterMove. Pas de joie. J'ai mis mon code actuel ici https://johnmacpherson.com/jw/jwplayer-lightbox-THREE.html –

Avez-vous entendu parler de Codepen de jsFiddle? – Janis

JW Player 7 avec intégration de FancyBox 3

Répondre

Questions connexes