在 Firefox 中使用 videojs 播放 Flash mp4 - 音频播放但视频为空白答案

【问题标题】：flash mp4 playback with videojs in firefox - audio plays but video is blank在 Firefox 中使用 videojs 播放 Flash mp4 - 音频播放但视频为空白
【发布时间】：2013-12-13 09:17:09
【问题描述】：

所以我正在使用 videojs 来动态渲染来自 instagram 的一些 mp4。我正在使用这个函数来调用播放器，并且在使用 firefox 之前效果很好：

      // o is the jquery object for the video
      var vid_obj = o.find('video')
        var vid_id = vid_obj[0].id
        settings = vid_obj.attr('data-settings')

        if (settings) settings = $.parseJSON(settings)

        if (vid_id) {
            settings.height = vid_obj.height()
            videojs.options.flash.swf = "/scripts/vendor/video.js/video-js.swf"
            videojs(vid_id, settings)
        }

当我在 Chrome 或任何其他支持本机 mp4 的浏览器中运行脚本时，它加载正常，即使我将 flash 指定为技术订单的默认值。在 Firefox 中，音频播放，但视频为空白。

此外，我从 firefox 收到这些错误：

不支持“video/mp4”的指定“type”属性。媒体资源 http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 加载失败。未能加载所有候选资源。媒体加载暂停。不支持“video/mp4”的指定“type”属性。加载媒体资源 http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 失败。未能加载所有候选资源。媒体加载暂停。

我在 stackoverflow 上挖了一下，发现了这个帖子：Issue with the flash fallback of VideoJs with Firefox

还有，这个有趣的点

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

我尝试使用$(this).blur() 添加.ready() 回调，但没有成功。有什么建议？

【问题讨论】：

标签： javascript jquery video video.js

【解决方案1】：

如果您愿意，您也可以发布自己的答案并接受它（因为您确实是找到解决方案的人），但这里是来自 GitHub 的答案，以防其他人偶然发现这个问题。

以下解决方案来自Video.js GitHub issue #854。问题和解决方案由uxtx提供。

@mmcc，感谢您的帮助。我制作了这个动态视频模型 (http://jsfiddle.net/nbAN5/5/)，它非常适合我。做了更多的挖掘，在我的实现中存在一个问题，即视频动画导致 Flash 对象位置被错误翻译。添加一个css规则来重置翻译解决了它，IE：

object.vjs-tech {
  -moz-transform: translate(0,0)
}

注意：如果您使用的是我认为使用 iframe 的 videojs youtube 插件，您也需要使用相同的修复程序来解决该翻译问题。

【讨论】：

噢！谢谢！我已经发现了。我非常高兴能奖励你业力，感谢你的帮助！

【解决方案2】：

如果是同样的问题导致我来到这里，那么这是 Qt 4 在 OSX 上使用的 Webkit 实现的问题。解决方案是升级到 Qt 5，它使用了在尝试播放 MP4 视频时不会抛出 TypeError 的新版本。

这详细说明了我的问题和解决方案的细节： http://magnemg.tumblr.com/post/113251336220/how-to-solve-a-capybara-webkit-and-video-js

【讨论】：