19

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

请建议/指导/帮助。

4

3 回答 3

12

问题是大多数媒体对象需要一个播放器来运行，无论是（自托管）第三方软件还是浏览器的插件/扩展，通常是 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>

请注意，我添加了一个 (HTML5)属性来data-type指示fancybox (v1.3.4) 应该处理的。我用于您的本地视频，因为无论我播放 mp4 视频，我都会使用播放器 (jwplayer.swf)。typecontentswfswf

那么您可以对其中任何一个使用此脚本：

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+ 一起使用，请参阅此以获得更多信息。您可以使用 jQuery v1.8.3 或按照参考帖子中的方式应用补丁。

最后评论：这可能不适用于移动设备。您可能更喜欢使用不同的播放器，如mediaelements来实现跨浏览器/跨平台兼容性（或使用旧版浏览器后备选项获取 jwplayer v6.x）

于 2013-10-02T18:48:48.660 回答
6

此代码可帮助您运行本地视频文件，确保您的解决方案中有 .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>

于 2016-04-19T13:53:44.347 回答
0

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>

于 2017-03-16T07:13:39.293 回答