我在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>
请建议/指导/帮助.
JFK*_*JFK 10
问题是,大多数媒体对象需要一名球员来运行,无论是(自托管)第三方软件或浏览器的插件/扩展程序,通常的QuickTime的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)data-type属性来表示type的content的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 +一起使用,请参阅此内容以获取更多信息.您可以使用jQuery v1.8.3或在引用的帖子中应用补丁.
最后评论:这可能不适用于移动设备.您可能更愿意使用像mediaelements这样的其他播放器来实现跨浏览器/跨平台兼容性(或者使用传统浏览器后备选项获取jwplayer v6.x)
此代码可帮助您运行本地视频文件,确保您的解决方案中包含.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>