BigVideo.js：フルスクリーンの背景ビデオ

jQueryのBigVideo.jsプラグインは、HTML5 Fullscreen APIを介して、ビデオを背景画像としてページに追加します。 ビデオは自動的に任意の画面サイズに拡大されます。 動作するには、最初にjQuery、jQuery UI、およびjQuery imagesloadedライブラリをダウンロードする必要があります 。 打ち上げ：

$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('http://video-js.zencoder.com/oceans-clip.mp4'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動画のホスティングとしてVimeo Proを使用すると便利です。mp4ファイルへの直接リンクを提供し、10 Mbpsを超える速度でコンテンツをアップロードします。



この例のように、複数のビデオのリストを無限ループで実行できます。 もちろん、ユーザーがビデオの再生をオフにできるようにボタンを追加する必要があります。

 $(function() { var BV = new $.BigVideo(); BV.init(); BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true}); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モバイルデバイスでは自動ビデオ再生が禁止されているため、次のコードを使用してそれらを認識し、背景ビデオを静的な背景画像に置き換えることができます。

 var BV = new $.BigVideo(); BV.init(); if (Modernizr.touch) { BV.show('video-poster.jpg'); } else { BV.show('video.mp4',{ambient:true}); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

開始するビデオをメニューで選択できるプレイリストのサポートがあります。



背景に適した無料動画のコレクション 。