web-dev-qa-db-ja.com

jQueryおよびFancyboxのビデオ（Youtubeではなくローカルビデオファイルmp4）

Jquery FencyBoxでYoutubeビデオを正常に実行しています。しかし、Jquery FencyBoxでローカルMP4ビデオファイルを実行できません（このファイルはフォルダーに存在します）

JQUERY FENCYBOXでローカルビデオファイルを実行する方法を教えてください（FencyBoxでyoutubeビデオを実行しているのと同じです）。

以下は私が使用しているコードです：

1）。これらのファイル（プラグイン）を使用しています：

jquery.fancybox-1.3.4.js AND jquery.fancybox-1.3.4.css

2）。 Youtubeのビデオをファンシーボックスで正常に再生：

<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）。これで、Fancy BoxでローカルビデオファイルMP4を再生できません。

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

提案/ガイド/ヘルプをしてください。

jqueryfancybox
18
Anwer Hussain

問題は、ほとんどのメディアオブジェクトでは、プレーヤーが（自己ホスト型）サードパーティソフトウェアまたはブラウザーのプラグイン/拡張機能（通常はMP4ビデオの場合はquicktime）を実行する必要があることです。

Youtubeの場合、埋め込みプレーヤーが既に提供されているので、それについて心配する必要はありませんが、ローカルビデオの場合は、外部プレーヤーを使用する必要がありますjwplayer（またはその他の好み）。fancyboxにはビデオプレーヤーが含まれていないことに注意してください。

そこで、次のhtmlを使用して各ビデオをリンクします

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

注意type of content fancybox（v1.3.4）が処理する必要があることを示すために（HTML5）data-type属性を追加したこと。 mp4ビデオを再生しているにもかかわらず、swfプレーヤー（jwplayer.swf）を使用するので、ローカルビデオにswfを使用しました。

次に、これらのいずれかにこのスクリプトを使用できます。

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

ここでデモを見ることができます http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html

[〜＃〜] note [〜＃〜]：.on()にはjQuery v1.7 +が必要ですが、fancyboxは動作しませんjQuery v1.9 +。詳細については this を参照してください。 jQuery v1.8.3を使用するか、参照記事のようにパッチを適用できます。

[〜＃〜] last [〜＃〜]コメント：これはモバイルデバイスでは機能しない可能性があります。代わりに mediaelements のような別のプレーヤーを使用して、ブラウザ間またはプラットフォーム間の互換性を確保することをお勧めします（またはレガシーブラウザのフォールバックオプションでjwplayer v6.xを取得します）

10
JFK

このコードは、ローカルビデオファイルを実行するのに役立ちます。ソリューションに.mp4ビデオファイルがあることを確認するか、アンカータグでyoutubeビデオをリンクできます。

<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の回答。

<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