Question

我在Jquery FencyBox中成功运行了Youtube视频。但是，我无法在Jquery FencyBox中运行本地MP4视频文件（此文件存在于文件夹中）

请告诉我如何在JQUERY FENCYBOX中运行本地视频文件（与我在FencyBox中运行youtube视频相同）。

以下是我正在使用的代码：

1）。我正在使用这些文件（插件）：

jquery.fancybox-1.3.4.js 和 jquery.fancybox-1.3.4.css

2）。在Fancy Box中成功播放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>

请建议/指导/帮助。

Answer 1

问题在于大多数媒体对象需要播放器运行，可以是（自托管）第三方软件或浏览器的插件/扩展，通常是 quicktime ，用于MP4视频。

对于youtube，他们已经提供了一个嵌入式播放器，所以你不必担心，但对于你的本地视频，你仍然需要使用外部播放器，让我们说< em> 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 fancybox（v1.3.4）的content应该处理。我使用swf作为您的本地视频，因为我将使用swf播放器（jwplayer.swf），无论我是在播放mp4视频。

然后您可以将此脚本用于其中任何一个：

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）

Answer 2

此代码可帮助您运行本地视频文件，确保您的解决方案中包含.mp4视频文件，否则您可以将YouTube视频与锚标记相关联。

＆＃13;

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

＆＃13;

Answer 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="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>       
</div>
</body>

jQuery和Fancybox中的视频（本地视频文件mp4而不是Youtube）

3 个答案: