Video.js kullanarak tam video arka planı

Question

Pencereyi yeniden boyutlandırırken bile her zaman tam boyutu gösteren tam ekran video arkaplanı oluşturmaya çalışıyorum. http://webkunst.comeze.com/test/

Bu sahip sorundur: http://webkunst.comeze.com/test/wide.png

ve dikey ekranda böyle gösteriyor: Geniş ekranda

böyle gösteriyor burada

bu site http://webkunst.comeze.com/test/vertical.png

Gördüğünüz gibi her zaman resizin yerine videoya biraz siyah çubuklar koydu g ekranın tamamı için video. Bu css ile

  <div id="full-background"> 
       <video class="video-js vjs-fullscreen" autoplay preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> 
        <source src="video/1.mp4" type='video/mp4' /> 
       </video> 
      </div> 

:

#full-background { 
    z-index: -999; 
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 


.video-js.vjs-fullscreen { 
    position: fixed; 
    overflow: hidden; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 100% !important; 
    height: 100% !important; 
    _position: absolute; 
    /* IE6 Full-window (underscore hack) */ 

} 

Ben Video.js eklentisi kullanıyorum: nasıl yapmak http://videojs.com/

Herhangi fikir ve

Bu

benim biçimlendirme olduğunu yan veya üst/altta siyah çubuklar göstermeden video tam boyutu?

Answer 1

Sadece burada varsayılan video genişlik ve yükseklik belirtebilirsiniz sizin gibi görünüyor:

http://videojs.com/tag-builder/

ancak streç videonun kendisi farklı ekran çözünürlükleri doldurmak için değil , her zaman korur en boy oranı.

Ama rengini belirtebilirsiniz yerine siyah çubuklar:

.vjs-default-skin .vjs-play-progress { background: #900; } 

veya Skin:

<video class="video-js my-custom-skin" ...> 

Kaynak: https://github.com/zencoder/video-js/blob/master/docs/skins.md

Answer 2

Sen bağlı olarak farklı CSS Sınıfları uygulamak için medya sorguları kullanabilirsiniz en boy oranı?

Geniş ekran bir dizüstü bilgisayar kullanıyorum ve aşağıdakileri kullanarak videonun tam ekran olmasını sağlayabiliyorum.

.video-js .vjs-tech { 
width: 100% !important; 
} 

video { 
    width:100%; 
} 

Bir portre ekranı için aşağıdakileri kullanarak yüksekliği doldurabilirim.

.video-js .vjs-tech { 
height:100% !important 
} 

video { 
width:auto !important; 
} 

Yani farklı boyutlar uygulamak @media screen and (device-aspect-ratio: 16/9) gibi medya sorgularını kullanabilirsiniz.

Answer 3

BigVideo.JS'u denediniz mi? Video.JS'yi çekirdek olarak kullanır ve bunun üzerine inşa edilir. Sadece jQuery gerektirir.