Question

我正在尝试将BigVideo.js实现为Bootstrap 3.0.3网站中心容器背后的背景视频。

示例视频正在播放，但是，当页面加载时，在视频最终播放之前，左上角会出现一个小玩家：

enter image description here

如果您在Firefox中查看this example，则可以看到加载动画的分布。

我希望在显示内容和视频之前，这个加载动画居中并跨越整个背景。但是，This issue was reported before on 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

在你的风格中：

{{#list}}
  <p>
  This should be replaced: {{name}}
  This is not replaced: \{{example}}   <== this doesn't work, just for illustration
  </p>
{{/list}}

加载BigVideo.js之前，小玩家出现在左上角

4 个答案: