jQuery和Fancybox中的video(本地video文件mp4而不是Youtube)

我在Jquery FencyBox中成功运行了Youtubevideo。 但是,我无法在Jquery FencyBox中运行本地MP4video文件(此文件存在于文件夹中)

请告诉我如何在JQUERY FENCYBOX中运行本地video文件(与我在FencyBox中运行youtubevideo相同)。

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

1)。 我正在使用这些文件(插件):

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

2)。 在Fancy Box中成功播放Youtube上的video:

VIDEO Playing From YOUTUBE

Watch this amazing YouTube video

3)。 现在我无法在Fancy Box中播放本地video文件MP4:

 

Local Video File Playing

My Local Video in Example Folder

请建议/指导/帮助。

问题是大多数媒体对象需要播放器运行,可以是(自托管)第三方软件或浏览器的插件/扩展,通常是MP4video的快速时间。

在youtube的情况下,他们已经提供了一个嵌入式播放器,所以你不必担心,但对于你的本地video,你仍然需要使用外部播放器,让我们说jwplayer (或任何您有其他偏好。)请注意,fancybox不包含任何video播放器。

所以我会使用以下html链接每个video

 open youtube (embed mode)
open local video

请注意 ,我添加了一个(HTML5) data-type属性来指示fancybox(v1.3.4)应该处理的content type 。 我使用swf作为你的本地video,因为我将使用swf播放器(jwplayer.swf),无论我是在播放mp4video。

那么你可以将这个脚本用于其中任何一个:

 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或在引用的post中应用补丁。

最后评论:这可能不适用于移动设备。 您可能更愿意使用像mediaelements这样的其他播放器来实现跨浏览器/跨平台兼容性(或者使用旧版浏览器后备选项获取jwplayer v6.x)

此代码可帮助您运行本地video文件,确保您的解决方案中包含.mp4video文件,或者您可以将youtubevideo与锚标记链接。

       

Jinal用工作实例回答。