BigVideo.js - Проверьте, поддерживается ли браузером, backback заднего плана

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)

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

Добавление класса canplaythrough будет работать, если у меня в 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> 

Это в основном работает, потому что вы можете использовать метод on для подключения к стандарту w3c video events. Я считаю, что эти работы для вспышки тоже , но я должен подтвердить это еще.

Надеюсь, это поможет.