大视频.js - 检查浏览器是否支持，背景图像回退

BigVideo.js - Check if supported by browser, background image fallback

本文关键字：支持 背景 图像 回退 是否 浏览器 视频 js 检查      更新时间：2023-09-26

我正在使用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
  }

还有其他人想出一种方法来做到这一点吗？

试试这个：（在 Modernizr.touch 测试后坚持你的 else 块）

    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 方法挂接到标准 w3c 视频事件。我相信这些也适用于闪光灯，但我仍然需要确认这一点。

希望这有帮助。

相关文章：