web-dev-qa-db-fra.com

Vidéo dans jQuery et Fancybox (fichier vidéo local mp4 au lieu de Youtube)

J'exécute avec succès une vidéo Youtube dans Jquery FencyBox . Mais je ne parviens pas à exécuter un fichier vidéo MP4 local dans Jquery FencyBox (ce fichier existe dans un dossier)

S'il vous plaît, dites-moi comment puis-je exécuter un fichier vidéo local dans JQUERY FENCYBOX (de la même façon que je suis en train d'exécuter une vidéo youtube dans FencyBox).

Voici le code que j'utilise:

1). J'UTILISE CES FICHIERS (PLUGINS):

jquery.fancybox-1.3.4.js ET Jquery.fancybox-1.3.4.css

2) Lecture réussie de vidéos de Youtube dans Fancy Box:

<div class="main">
    <h1>VIDEO Playing From YOUTUBE</h1>
    <p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p>
</div>

3) Maintenant, je suis incapable de lire le fichier vidéo local MP4 dans Fancy Box:

<div class="main">   
    <h1>Local Video File Playing</h1>
    <p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>         
</div>

Veuillez suggérer/guider/aider.

jqueryfancybox
18
Anwer Hussain

Le problème est que la plupart des objets multimédias nécessitent l'exécution d'un lecteur, qu'il s'agisse d'un logiciel tiers (auto-hébergé) ou du plug-in/extension d'un navigateur, généralement quicktime _ pour les vidéos MP4.

Dans le cas de youtube, ils fournissent déjà un lecteur intégré, vous n'avez donc pas à vous en préoccuper, mais dans le cas de vos vidéos locales, vous devez toujours utiliser un lecteur externe, disons jwplayer (ou n’importe laquelle de vos préférences.) Notez que fancybox n’inclut aucun lecteur vidéo.

Je voudrais donc utiliser le code HTML suivant pour lier chaque vidéo

<a class="fancybox" data-type="iframe" href="http://www.youtube.com/embed/WAZ5SmJd1To?autoplay=1" title="youtube">open youtube (embed mode)</a><br />
<a class="fancybox" data-type="swf" href="pathToPlayer/jwplayer.swf?file=pathToVideo/video.mp4&autostart=true" title="local video mp4">open local video</a>

Notez que que j'ai ajouté un attribut (HTML5) data-type pour indiquer que la type de content fancybox (v1.3.4) devrait gérer. J'ai utilisé swf pour votre vidéo locale car je vais utiliser un lecteur swf (jwplayer.swf), quelle que soit la lecture d'une vidéo mp4.

alors vous pouvez utiliser ce script pour n'importe lequel d'entre eux:

jQuery(document).ready(function($){
    $(".fancybox").on("click", function(){
        $.fancybox({
          href: this.href,
          type: $(this).data("type")
        }); // fancybox
        return false   
    }); // on
}); // ready

Vous pouvez voir une démo ici http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html

NOTE: .on() requiert jQuery v1.7 + mais fancybox ne fonctionne pas avec jQuery v1.9 +, voir this pour plus d'informations. Vous pouvez utiliser jQuery v1.8.3 ou appliquer le correctif comme indiqué dans le message mentionné.

LAST COMMENTAIRE: cela peut ne pas fonctionner avec les appareils mobiles. Vous préférerez peut-être utiliser un autre lecteur, tel que mediaelements pour la compatibilité entre navigateurs/multiplateformes (ou obtenir jwplayer v6.x avec l’option de repli des anciens navigateurs).

10
JFK

Ce code vous aide à exécuter le fichier vidéo local, assurez-vous que votre fichier vidéo .mp4 est bien dans votre solution ou vous pouvez également lier la vidéo youtube à la balise anchor.

<head>
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#video a').fancybox({
                width: 640,
                height: 400,
                type: 'iframe'
            });
        });
    </script>
 </head>

<body>
<div id="video">
  <a href="new_video.mp4"><img src="/images/video_coverpage.jpg" alt="" /></a>       
</div>
</body>

6
Jinal Tandel

Jinal répond avec un exemple de travail.

<head>
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#video a').fancybox({
                width: 640,
                height: 400,
                type: 'iframe'
            });
        });
    </script>
 </head>

<body>
<div id="video">
  <a href="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>       
</div>
</body>

0
Danish Adeel