我正在构建一个灯箱，并已达到添加对 Flash 和视频的支持。我从来没有对视频有任何要求或需要，所以老实说不知道从哪里开始。我知道我必须能够为不同的浏览器提供不同的视频格式，但不知道如何处理。我也希望能在“非现代”浏览器中使用这项功能。我发现的教程和问题非常模糊，通常会导致“尝试使用此插件”。也许有人可以通过解释我将如何加载与浏览器兼容的视频以及我应该支持的视频格式来提供帮助？或链接 :) 谢谢!
最佳答案
我刚刚做了同样的事情。我使用了 Fancybox 的组合和 Video for Everybody .
基本上，Video for Everybody 背后的想法是您使用 HTML5 video对于不支持 HTML5 视频的浏览器，使用嵌入式 Flash 视频播放器标记。对于嵌入式 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>
关于javascript - 灯箱中的 jQuery 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12115429/