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

我使用BigVideo.js（http://dfcb.github.io/BigVideo.js/），并希望能够检查浏览器是否支持，如果不支持，则显示背景图片。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 
    }

任何人想出了一个办法做到这一点？

来源

2014-12-31 MP_Webby

你有没有想过这个？可以自己使用解决方案 –

试试这个：（粘在你的其他块Modernizr.touch试验后）

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 video events。我相信这些闪光太工作，但我需要确认这仍然。

希望这会有所帮助。

来源

2015-03-24 21:55:50

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

回答

相关问题