jQuery和Fancybox中的视频(本地视频文件mp4而不是Youtube)
我在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>请建议/指导/帮助。
回答 3
Stack Overflow用户
发布于 2013-10-03 02:48:49
问题是，大多数媒体对象都需要播放器才能运行，要么是(自托管的)第三方软件，要么是浏览器的插件/扩展，对于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属性来指示content fancybox (v1.3.4)应该处理的type。我使用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或按照参考帖子中的说明应用补丁。
LAST评论:这可能在移动设备上不起作用。您可能更喜欢使用不同的播放器，如mediaelements，以实现跨浏览器/跨平台的兼容性(或者使用带有传统浏览器后备选项的jwplayerv6.x)
Stack Overflow用户
发布于 2016-04-19 21:53:44
这段代码帮助你运行本地视频文件，确保你的解决方案中有你的.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>
Stack Overflow用户
发布于 2017-03-16 15:13:39
简明的答案和工作实例。
<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="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>
</div>
</body>
https://stackoverflow.com/questions/19134625
复制相似问题
腾讯云开发者
