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中失败了。发生这种情况时，我们会看到错误消息而不是视频：

无法加载视频，原因是服务器或网络出现故障，或者因为格式不受支持。

而不是展示这一点，我宁愿回退到背景图片。我试过以下没有运气：

  if( !BV ){
      //show fallabck
  }

和

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

其他人想出办法来做到这一点吗？

Answer 1

试试这个:(在Modernizr.touch测试后粘在你的else块中）

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

如果我在CSS＆amp;中添加班级canplaythrough将会有效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>

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

希望这有帮助。

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

1 个答案: