jQuery 和 Fancybox 中的视频（本地视频文件 mp4 而不是 Youtube）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19134625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Video in jQuery and Fancybox (Local video file mp4 Instead of Youtube)
提问by Anwer Hussain
I am successfully running a Youtube Video in Jquery FencyBox. But, I am unable to run a local MP4 Video File in Jquery FencyBox (this file exists in a folder)
我在 Jquery FencyBox 中成功运行了一个 Youtube 视频。但是，我无法在 Jquery FencyBox 中运行本地 MP4 视频文件（此文件存在于文件夹中）
Please tell me how can i run a local video file in JQUERY FENCYBOX (same as i am running a youtube video in FencyBox).
请告诉我如何在 JQUERY FENCYBOX 中运行本地视频文件（与我在 FencyBox 中运行 youtube 视频相同）。
Following is the code i am using:
以下是我正在使用的代码：
1). I AM USING THESE FILES(PLUGINS) :
1）。我正在使用这些文件（插件）：
jquery.fancybox-1.3.4.js AND jquery.fancybox-1.3.4.css
jquery.fancybox-1.3.4.js 和 jquery.fancybox-1.3.4.css
2). Successfully Playing video from Youtube in Fancy Box:
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). Now I am unable to play Local Video File MP4 in Fancy Box:
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>
Please suggest/guide/help.
请建议/指导/帮助。
回答by JFK
The issue is that most media objects require a player to run, either a (self-hosted) third-party software or a browser's plugin/extension, normally quicktimefor MP4 videos.
问题是大多数媒体对象都需要运行播放器，无论是（自托管）第三方软件还是浏览器的插件/扩展程序，通常是 MP4 视频的quicktime。
In the case of youtube, they provide already with an embedded player so you don't have to worry about that but in the case of your local video(s), you still need to use an external player, let's say jwplayer(or any other of your preference.) Notice that fancybox doesn't include any video player.
就 youtube 而言，他们已经提供了嵌入式播放器，因此您不必担心，但对于本地视频，您仍然需要使用外部播放器，比如说jwplayer（或任何其他你喜欢的。）请注意，fancybox 不包含任何视频播放器。
So I would use the following html to link each video
所以我会使用以下 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>
Noticethat I added a (HTML5) data-typeattribute to indicate the typeof contentfancybox (v1.3.4) should handle. I used swffor your local video since I will be using a swfplayer (jwplayer.swf) regardless I am playing a mp4 video.
请注意，我加了（HTML5）data-type属性来表示type的content的fancybox（V1.3.4）应该处理。我用于swf您的本地视频，因为swf无论我正在播放 mp4 视频，我都会使用播放器 (jwplayer.swf)。
then you could use this script for any of them :
那么您可以将这个脚本用于其中任何一个：
jQuery(document).ready(function($){
$(".fancybox").on("click", function(){
$.fancybox({
href: this.href,
type: $(this).data("type")
}); // fancybox
return false
}); // on
}); // ready
You can see a demo here http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html
你可以在这里看到一个演示http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html
NOTE: .on()requires jQuery v1.7+ but fancybox doesn't work with jQuery v1.9+, see thisfor further information. You could use jQuery v1.8.3 or apply the patch as in the referred post.
注意：.on()需要 jQuery v1.7+ 但fancybox 不能与 jQuery v1.9+ 一起使用，请参阅此了解更多信息。您可以使用 jQuery v1.8.3 或应用参考帖子中的补丁。
LASTCOMMENT: this may not work in mobile devices. You may rather prefer to use a different player like mediaelementsfor cross-browser/cross-platform compatibility instead (or get jwplayer v6.x with legacy browsers fallback option)
最后评论：这可能不适用于移动设备。您可能更喜欢使用不同的播放器，例如mediaelement来实现跨浏览器/跨平台兼容性（或使用旧浏览器回退选项获取 jwplayer v6.x）
回答by Jinal Tandel
This code helps you to run the local video file, make sure you've your .mp4 video file in your solution or else you can link the youtube video with anchor tag.
此代码可帮助您运行本地视频文件，确保您的解决方案中有 .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> 回答by Danish Adeel
Jinal answer with working example.
Jinal 用工作示例回答。
<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> 