我正在构建一个灯箱，并且已经添加了对Flash和视频的支持。我从未对视频有任何要求或需要，所以说实话，不知道从哪里开始。我知道我必须能够为不同的浏览器提供不同的视频格式，但不知道如何处理这个问题。我也希望能在“非现代”浏览器中使用它。我发现的教程和问题非常含糊，通常会导致“尝试使用此插件”。也许有人可以通过解释我如何加载与浏览器兼容的视频以及可能支持的视频格式来提供帮助？或者链接:)谢谢！
答案 0 :(得分：3)
我做了同样的事情。我使用了Fancybox和Video for Everybody的组合。
基本上，Video for Everybody背后的想法是，您将HTML5 video标记与嵌入式Flash视频播放器一起用于不支持HTML5视频的浏览器。对于嵌入式Flash播放器，我使用了JWPlayer。
然后你只需要制作类似<a href="#videoPlayer" class="video_link">Play Video</a>的内容，并在链接上指向Fancybox。瞧，您在Fancybox中有一个视频（与Lightbox大致相同）。
对于跨浏览器兼容性，you should offer the file in MP4 (using H.264 codec) and WebM or Ogg。不支持HTML5视频的较旧浏览器无论如何都会使用MP4文件的Flash播放器后备。
要记住MP4文件的一件事是，moov atom通常放在文件的末尾，因此文件在完全下载之前无法开始播放。使用像qt-faststart这样的工具将其移动到文件的开头，允许它在完全下载之前开始播放。
<小时/> 示例：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.video_link").fancybox();
});
</script>
</head>
<body>
<a href="#videoPlayer" class="video_link">Play video</a>
<video width="640" height="360" controls id="videoPlayer">
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>
</body>
</html>