加載BigVideo.js之前，小玩家出現在左上角

Question

我正在嘗試將BigVideo.js實現為Bootstrap 3.0.3網站中的集中容器背后的背景視頻。

正在播放樣本視頻，但是，當頁面加載時，在視頻最終播放之前，左上角會出現一個小玩家：

如果您在Firefox中查看此示例 ，則可以看到加載動畫的分布。

在顯示內容和視頻之前，我希望這個加載動畫居中並跨越整個背景。 之前在GitHub上報告了這個問題 ，但沒有提供令人滿意的，有效的解決方案。

不幸的是，我的JavaScript知識非常有限。 我已經實現了PreLoadMe.js來隱藏BigVideo.js的加載過程，但不幸的是，當PreLoadMe.js完成后，后台視頻開始加載。 所以同樣的效果發生了。

我目前按照以下方式調用BigVideo函數，如支持站點所述：

<!-- BigVideo -->

<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://vjs.zencdn.net/v/oceans.mp4', {ambient:true});
});
</script>

<!-- Preloader -->

<script type="text/javascript">
//<![CDATA[
    $(window).load(function() { // makes sure the whole site is loaded
        $('#status').fadeOut(); // will first fade out the loading animation
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
        $('body').delay(350).css({'overflow':'visible'});
    })
//]]>
</script>

HTML：

<!-- Preloader -->
<div id="preloader">
<div id="status">&nbsp;</div>
</div>

<div class="container">


  <div class="content-box" >
    <h1>Ipsum Lorum</h1>
    <p class="lead">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
  </div>

</div>

CSS：

html, body { 
    overflow: hidden;
    margin:0;
    padding:0;
}

.content-box {

    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;

    background-color: rgba(0,0,0,0.75);
    color: white;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    z-index: 2;

    padding: 50px;
    width: 400px;
    height: 400px;
    margin: -200px 0 0 -200px;  
}


#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

Answer 1

這是一個適合我的解決方案：

CSS：

#big-video-wrap {
    display: none;
}

JAVASCRIPT ：

BV.getPlayer().on('durationchange',function(){
    $('#big-video-wrap').fadeIn();
});

Answer 2

我將使用僅HTML / CSS解決方案將其置於基礎“居中”點，然后使用Javascript來完成詳細信息。 將html / body設置為100％高度然后水平居中你的加載動畫，並給它一個類似100px的上邊距，這樣你就知道在所有設備和所有瀏覽器中，即使沒有JS，你也可以讓它可見並居中。 期。 然后，使用javascript將其垂直居中。 我看到你修好了，這很好，這意味着你必須弄清楚如何使用這種方法更好地定位它。 請記住，某些Android設備有一個固定的位置錯誤，其中固定元素絕對是瘋狂的，所以除非你准備好處理它，我只是采取其他方法。

HTML元素或body元素的背景應為＃000以匹配加載器。 這就是我要做的 - 在這種情況下你有一個逐步增強的裝載機:)

此外，我會將您的加載圖形剪切到只有加載器。 我不確定為什么你周圍有額外的空間，但這是不必要的。 如果你想讓整個背景變黑，你可以做我上面提到的（身體背景上的＃000），或者如果你想要它周圍的那個黑色區域，就像你現在擁有它一樣，你可以將它包裝在一個具有這些尺寸的div中＃000 bg和中心那個。 這是減少頁面加載時間的一個很好的范例 - 剪輯所有不必要的東西，特別是當你可以使用CSS時。

Answer 3

如果您想繼續使用預加載器，您可以使用videojs ready事件作為觸發器而不是頁面加載來淡出所有內容。 這些方面的東西：

videojs("example_video_1").ready(function(){
    $('#status').fadeOut(); // will first fade out the loading animation
    $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
    $('body').delay(350).css({'overflow':'visible'});
});

有關更多信息，請參見此處： https ： //github.com/videojs/video.js/blob/master/docs/guides/api.md

Answer 4

在你的風格中：

.vjs-control-bar {
display: none;}