Vidéo en 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 suis pas capable d'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 lancer un fichier vidéo local dans jQuery FENCYBOX (comme je lance une vidéo youtube dans FencyBox).

voici le code, je suis en utilisant:

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

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

2). Succès de la lecture vidéo à partir de Youtube dans la boîte de fantaisie:

<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 la boîte de fantaisie:

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

s'il vous Plaît suggérer/guide/aide.

18
demandé sur JFK 2013-10-02 14:14:09

3 réponses

le problème est que la plupart des objets média nécessitent un lecteur pour fonctionner, soit un logiciel tiers (auto-hébergé) ou un plugin/extension de navigateur, normalement quicktime pour les vidéos MP4.

Dans le cas de youtube, ils fournissent déjà avec un lecteur intégré de sorte que vous n'avez pas à vous soucier de cela, mais dans le cas de votre vidéo locale(s), vous avez encore besoin d'utiliser un lecteur externe, disons jwplayer (ou toute autre de vos préférences.) Remarquez que fancybox ne comprend pas un lecteur vidéo.

alors j'utiliserais le 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>

Avis que j'ai ajoutée un (HTML5) data-type attribut pour indiquer le typecontent fancybox (v1.3.4) devrait manipuler. J'ai utilisé swf pour votre vidéo locale étant donné que j'utiliserai un swf joueur (jwplayer.swf) quoi qu'il en soit je joue une vidéo mp4.

ensuite, vous pouvez utiliser ce script pour l'un d'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() nécessite jQuery v1.7+ mais fancybox ne fonctionne pas avec jQuery v1.9+, Voir pour en savoir plus. Vous pourriez utiliser jQuery v1.8.3 ou appliquez le patch comme dans le post mentionné.

dernier commentaire: cela peut ne pas fonctionner dans les appareils mobiles. Vous pouvez préférer utiliser un lecteur différent comme médiaelements pour la compatibilité entre navigateur/plate-forme à la place (ou obtenir jwplayer v6.x avec les anciens navigateurs de secours en option)

10
répondu JFK 2017-05-23 12:17:19

ce code vous aide à lancer le fichier vidéo local, assurez-vous que vous avez votre .mp4 fichier vidéo dans votre solution ou bien vous pouvez lier la vidéo youtube avec anchor tag.

<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
répondu Jinal Tandel 2016-04-25 12:46:57

Jinal réponse avec 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
répondu Danish Adeel 2017-03-16 07:13:39