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
3)。 现在我无法在Fancy Box中播放本地video文件MP4:
Local Video File Playing
请建议/指导/帮助。
问题是大多数媒体对象需要播放器运行,可以是(自托管)第三方软件或浏览器的插件/扩展,通常是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)
Jinal用工作实例回答。