BigVideo.js-检查浏览器是否支持背景图像回退

Question

I'm using BigVideo.js ( http://dfcb.github.io/BigVideo.js/ ) and want to be able to check if it is supported by the browser, if not, then show a background image instead.

Here's what I have:

    var BV = new $.BigVideo({  //set container for video
        container: $('#intro')
    });

    BV.init();  //initialise
    if (Modernizr.touch) { //show background image for touch devices
        BV.show('img/intro-bg.jpg');
    } else {
        BV.show('vids/bubble.mp4', { //set video format - x-browser support
            ambient: true
        });
        BV.show('vids/bubble.webm', {
            ambient: true
        });
        BV.show('vids/bubble.ogv', {
            ambient: true
        });

        BV.show([{
            type: "video/mp4", //make it loop
            src: "vids/bubble.mp4"
        }, {
            type: "video/webm",
            src: "vids/bubble.webm"
        }, {
            type: "video/ogg",
            src: "vids/bubble.ogv"
        }, {
            ambient: true
        }
        ]);
    }

This works great in all modern browsers, but failed in an old version of Opera. When this happens we see an error message instead of the video:

The video could not be loaded, either because the server or network failed or because the format is not supported.

Rather than show this I would prefer to fallback to a background image. I've tried the following with no luck:

  if( !BV ){
      //show fallabck
  }

and

  if( !BV.init() ){
      //show fallback
  }

Anyone else figured out a way to do this?

Answer 1

Try this: (stick in in your else block after the Modernizr.touch test)

    BV.getPlayer().ready(function(){
        this.on('canplaythrough', function(){
            // show fallback, eg:
            $('#big-video-wrap').addClass('canplaythrough');
        });
    });

Adding the class canplaythrough would work if I had in my CSS & HTML:

<div class="background">
    <div id="big-video-wrap"><!-- this is auto-injected--></div>
</div>

<style>
    #big-video-wrap { visibility:hidden; }
    #big-video-wrap.canplaythrough { visibility:visible; }
    .background { background:url(/** whatever your img is **/); }
</style>

This basically works because you can use the on method to hook onto standard w3c video events . I believe these work for flash too but I need to confirm this still .

Hope this helps.