javascript - BigVideo.js - 检查浏览器是否支持，背景图像后备

Question

我正在使用 BigVideo.js ( http://dfcb.github.io/BigVideo.js/ )，并且希望能够检查浏览器是否支持它，如果不支持，则显示背景图像。

这是我所拥有的:

    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
        }
        ]);
    }

这在所有现代浏览器中都工作得很好，但在旧版本的 Opera 中失败了。发生这种情况时，我们会看到一条错误消息而不是视频:

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

与其显示这个，我更愿意回退到背景图像。我尝试了以下方法，但没有成功:

  if( !BV ){
      //show fallabck
  }

和

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

还有人想出办法做到这一点吗？

Answer 1

试试这个:(在 Modernizr.touch 测试后插入 else block )

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

如果我的 CSS 和 HTML 中有 canplaythrough 类，那么添加类就可以了:

<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>

这基本上是有效的，因为您可以使用 on 方法来 Hook 标准 w3c video events 。我相信这些也适用于闪存但我仍然需要确认这一点。

希望这有帮助。