我在
Jquery FencyBox中成功地运行了Youtube视频.
但是,我无法在Jquery FencyBox中运行本地MP4视频文件(该文件存在于一个文件夹中)
但是,我无法在Jquery FencyBox中运行本地MP4视频文件(该文件存在于一个文件夹中)
请告诉我如何在JQUERY FENCYBox中运行本地视频文件(与我在FencyBox中运行YouTube视频一样).
以下是我使用的代码：
jquery.fancybox-1.3.4.js
和
jquery.fancybox-1.3.4.css
2).成功播放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).现在我无法在花式框中播放本地视频文件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>
请建议/指导/帮助.
解决方法
问题是大多数媒体对象要求播放器运行(自主托管的)第三方软件或浏览器的插件/扩展卡,通常是MP4视频的快速播放.
在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)数据类型属性来指示fancybox(v1.3.4)应该处理的内容类型.我使用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)
