2

So I'm using videojs to render some mp4s coming in from instagram dynamically. I'm using this function to call the player, and it works great until it comes to 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)
        }

When I run the script in Chrome or any other browser with native mp4 support it loads fine, even if i specify flash as the default for tech order. In firefox, the audio plays but the video is blank.

screen shot 2013-11-27 at 9 31 53 am

In addition, I'm getting these errors from firefox:

Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 failed. All candidate resources failed to load. Media load paused. Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://distilleryimage6.s3.amazonaws.com/6ccd80e8561211e38d000a4507324e8b_101.mp4 failed. All candidate resources failed to load. Media load paused.

I dug around a bit on stackoverflow and found this thread: Issue with the flash fallback of VideoJs with Firefox

Also, this interesting point

I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.

I tried adding the .ready() callback with the $(this).blur() with no success. Any suggestions?

Community
  • 1
  • 1
uxtx
  • 329
  • 1
  • 2
  • 9

2 Answers2

3

You can also post your own answer and accept it if you prefer (since you are indeed the one that found the solution), but here's the answer from GitHub in case someone else stumbles on this question.

Solution below is from Video.js GitHub issue #854. Question and solution was provided by uxtx.

@mmcc, thanks for your help. I whipped up this dynamic video mockup (http://jsfiddle.net/nbAN5/5/), and it was working perfectly for me. Did some more digging and there was an issue in my implementation where videos getting animating was causing the flash object position to be mistranslated. Adding a css rule to reset the translation resolved it, IE:

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

Note: if you're using videojs youtube plugin which i believe uses iframe, you'll need to use that same fix to resolve that translation issue as well.

Matt McClure
  • 2,046
  • 2
  • 18
  • 19
  • Doh! Thanks! I had found that out. I'm totally happy to award you the karma though for all your help! – uxtx Dec 04 '13 at 21:50
0

If it is the same problem that led me here, then it's an issue with the Webkit implementation that Qt 4 uses on OSX. The solution is to upgrade to Qt 5 which uses a newer version that doesn't throw TypeError's when trying to play MP4 videos.

This details the specifics of my problem and the solution: http://magnemg.tumblr.com/post/113251336220/how-to-solve-a-capybara-webkit-and-video-js

Magne
  • 16,401
  • 10
  • 68
  • 88