1

我正在构建一个灯箱，并已添加对 Flash 和视频的支持。我从来没有对视频有任何要求或需要，所以说实话不知道从哪里开始。我知道我必须能够为不同的浏览器提供不同的视频格式，但不知道如何解决这个问题。我也希望在“非现代”浏览器中进行这项工作。我发现的教程和问题非常模糊，通常会导致“尝试使用此插件”。也许有人可以帮助解释我将如何加载与浏览器兼容的视频，以及我应该支持的视频格式？或链接:) 谢谢！

4

1 回答 1

3

我只是做了同样的事情。我使用了Fancybox和Video for Everyone 的组合。

基本上，Video for Everyone 背后的想法是，您可以将 HTML5video标签与嵌入式 Flash 视频播放器一起用于不支持 HTML5 视频的浏览器。对于嵌入式 Flash 播放器，我使用了 JWPlayer。

然后您只需制作类似<a href="#videoPlayer" class="video_link">Play Video</a>的内容并将 Fancybox 指向链接。瞧，您在 Fancybox 中有一个视频（与 Lightbox 大致相同）。

为了跨浏览器的兼容性，您应该提供 MP4（使用 H.264 编解码器）和 WebM 或 Ogg 格式的文件。不支持 HTML5 视频的旧版浏览器无论如何都会使用 Flash 播放器作为 MP4 文件的后备。

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&amp;image=__POSTER__.JPG&amp;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>
于 2012-08-24T19:24:31.820 回答