VideoJs 与 Firefox 的 flash 回退问题答案

【问题标题】：Issue with the flash fallback of VideoJs with FirefoxVideoJs 与 Firefox 的 flash 回退问题
【发布时间】：2013-07-14 22:30:33
【问题描述】：

我尝试将 videoJs 添加到我的网站以播放 MP4 文件，这一切都在 Chrome 中完美运行，但是当我使用 Firefox（不支持 MP4 文件）时，flash 播放器停留在黑屏上，按钮什么也不做。

简单的问题：为什么？我不明白，像 vine.co 或 instagram 这样的网站使用 videoJs 没有问题，但对我来说并非如此。

所以我尝试更改技术顺序，现在 Flash 总是尝试读取视频，但即使在 chrome 上也没有附加内容。

这是我的测试代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <script src="http://vjs.zencdn.net/4.0/video.js"></script>
    <script>
      videojs.options.flash.swf = "video-js.swf"
    </script>
</head>
<body>
    <video id="video" src="http://domain.com/flash/video.mp4" control></video>
    <script type="text/javascript">
        jQuery(function() {
            var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
            console.log(player);
        });
    </script>
</body>
</html>

所有文件（swf 播放器、MP4 视频和 html 文件）都位于名为“flash”的同一文件夹中。

你能帮帮我吗？

【问题讨论】：

Firefox 确实支持 MP4 文件，并且从大约 34 版开始支持。

标签： javascript html flash video video.js

【解决方案1】：

这里有几件事可以尝试：

确保您正在加载 video-js css 文件。
将“video-js”和皮肤类添加到您的视频对象中，如下所述（另外，它是“控件”，而不是“控件”）：https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
如果你从CDN加载视频js，你不需要设置flash.swf选项。这也可能导致问题。

您不需要设置 techOrder 来让 Firefox 正常运行，而且您绝对不需要为每种类型的“技术”设置相应的视频文件。 Flash 将在 mp4 中播放回退，只要它高于版本 9 左右。

我确实在 Firefox 上遇到了一个问题，即当我包含“就绪”事件时，Flash 后备会播放视频，但视频会是空白的（会播放音频）。我可以通过在 $(this) 对象上触发模糊事件来解决这个问题。如果您需要使用 ready，这可能对您有所帮助。

【讨论】：

【解决方案2】：

当您想通过 Flash 传送视频时，您需要一个 flv 版本。提供视频的另一个 webm 版本可能会很有用。这应该在 Firefox 和 Chrome 中播放。

对于每项技术，您都需要相应的视频文件。

【讨论】：

你应该提交这个作为答案，因为它解决了问题，更好的是你有演示。你拯救了我的一天。谢谢