Créer dynamiquement Fancybox et y coller de la vidéo

Question

Je dois remplacer tous les tags vidéo HTML5 de la page par leur image d'affiche associée à un événement click; l'événement click lance une Fancybox contenant cette balise vidéo. Quelqu'un sait-il comment faire cela avec jQuery? Je vous remercie.

Answer 1

trouvé une solution, appelé la fonction $ (window) .load; le problème est de résoudre un problème sur Safari 5/iPad. Je sais que nous ne sommes pas censés utiliser des trucs spécifiques au navigateur, mais cela est le seul moyen de résoudre ce problème particulier :)

$(window).load(function() { 
if (jQuery.browser.safari) { 
    var videoTag = ""; 
    var posterPath = ""; 
    var replacement = ""; 
    var boxId = ""; 
    var el = ""; 
    $("[id^='vid-']").each(function(){ 
    videoTag = ""; 
    posterPath = ""; 
    replacement = ""; 
    boxId = ""; 
    el = ""; 

    el = $('[id='+this.id+']'); 
    videoTag = el.parent().html(); 
    posterPath = el.parent().find("img").attr("src"); 
    boxId = this.id + "_manual"; 
    replacement = "<a title='' id='" + boxId + "' href='javascript:;'><img src='" + 
     posterPath + "' style='float:left; padding-left:5px; '/></a>" 
    el.parent().replaceWith(replacement); 

    $("[id="+boxId+"]").fancybox( 
     { 
      'content' : videoTag, 
      'autoDimensions' :true, 
      'padding' : 9, 
      'showCloseButton' : true, 
      'enableEscapeButton': true  
     } 
    ); // end click function 
    }); // end each function 
} // end if 
} // end load function 

Answer 2

J'ai trouvé que dans le passé, la meilleure façon d'utiliser fancyBox avec des vidéos de dialogues est de créer un conteneur de conteneur vidéo flash vide pour votre lecteur FLV. Ensuite, lors du chargement de votre boîte de dialogue fancyBox, vous utilisez l'événement OnStart sur fancyBox pour cibler le div conteneur, le remplir avec le contenu du lecteur vidéo. Cela déclenche alors le rendu de la vidéo dans le conteneur div que vous affichez déjà via fancyBox. La dernière partie est d'obtenir les dimensions de la charge vidéo post-fancyBox correcte, cela dépend de votre joueur FLV ayant un événement à accrocher et le lecteur FLV étant en mesure de vous fournir les dimensions du film.

Pour un tutoriel complet sur cette approche voir l'adresse suivante:

integrated flowPlayer, fancyBox and carousel tutorial.

Et pour une démonstration de ce à voir d'action:

integration demonstration

Answer 3

Peut-être une meilleure façon serait d'avoir une série de divs contenant le img affiche puis associez un événement onclick à l'affiche qui affiche la balise vidéo (ou modifie la source de la balise vidéo) dans la zone. Mobile Safari permet aux événements de clic de déclencher la lecture d'une vidéo. Cela devrait également fonctionner sur l'iPad. Cela signifie également que les utilisateurs ne seront pas obligés de cliquer deux fois sur l'image de l'affiche pour lire la vidéo (puisque Safari mobile ne prend pas en charge l'événement click).