jquery - jQuery 和 Fancybox 中的视频(本地视频文件 mp4 而不是 Youtube)

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

问题是大多数媒体对象都需要播放器来运行，无论是(自托管)第三方软件还是浏览器的插件/扩展程序，对于 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 属性来指示 content fancybox 的 type (v1.3.4) 应该处理。我将 swf 用于您的本地视频，因为无论我正在播放 mp4 视频，我都会使用 swf 播放器 (jwplayer.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

注意:.on() 需要 jQuery v1.7+，但 fancybox 不适用于 jQuery v1.9+，请参阅 this了解更多信息。您可以使用 jQuery v1.8.3 或应用引用帖子中的补丁。

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