Видео в jQuery и Fancybox (локальный видеофайл mp4 вместо Youtube)

Я успешно запускаю Youtube Video в JQuery FenceBox. Но я не могу запустить локальный видеофайл MP4 в JQuery FencyBox (этот файл существует в папке)

Скажите, пожалуйста, как я могу запустить локальный видеофайл в JQUERY FENCYBOX (так же, как я запускаю видео youtube в FencyBox).

Ниже приведен код, который я использую:

1). Я использую эти файлы (PLUGINS):

jquery.fancybox-1.3.4.js А ТАКЖЕ jquery.fancybox-1.3.4.css

2). Успешно Воспроизведение видео с Youtube в Fancy Box:

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

3). Теперь я не могу воспроизвести файл локального видео MP4 в 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>

Пожалуйста, предложите/посоветуйте/помогите.

Ответ 1

Проблема заключается в том, что для большинства объектов мультимедиа требуется проигрыватель, либо автономное программное обеспечение стороннего разработчика, либо плагин/расширение для браузера, обычно быстрое время для видеороликов MP4.

В случае 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>

Обратите внимание на, что я добавил атрибут (HTML5) data-type, чтобы указать type of content fancybox (v1.3.4). Я использовал swf для вашего локального видео, так как я буду использовать проигрыватель swf (jwplayer.swf), независимо от того, что я воспроизвожу видео mp4.

то вы можете использовать этот script для любого из них:

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

ПРИМЕЧАНИЕ: .on() требует jQuery v1.7 +, но fancybox не работает с jQuery v1.9 +, см. this для дополнительной информации. Вы можете использовать jQuery v1.8.3 или применить патч, как в указанном сообщении.

ПОСЛЕДНИЙ КОММЕНТАРИЙ: это может не работать на мобильных устройствах. Вы можете предпочесть использовать другой плеер, например, mediaelements для кросс-браузерной/кросс-платформенной совместимости (или получить jwplayer v6.x с наследством вариант резервирования браузеров)

Ответ 2

Этот код поможет вам запустить локальный видеофайл, убедитесь, что у вас есть видеофайл .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>

Ответ 3

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="#" onclick="location.href='http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251'; return false;">Click Here</a>       
</div>
</body>