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

Question

所以我正在使用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）对象上触发blur事件来解决这个问题。如果你需要准备就绪，这可能对你有帮助。

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

Answer 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插件，则您还需要使用相同的修补程序来解决该翻译问题。

Answer 2

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

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