Javascript 在加载BigVideo.js之前,小播放器出现在左上角
我试图在Bootstrap3.0.3-website中的一个中心容器后面实现背景视频 示例视频正在正确播放,但是,当加载页面时,在视频最终播放之前,左上角会出现一个小播放器: 如果您在Firefox中签出,您可以看到加载动画的分布 在显示内容和视频之前,我希望此加载动画以整个背景为中心并跨越整个背景,但是,没有提供令人满意的有效解决方案 不幸的是,我的JavaScript知识非常有限。我已经实现了隐藏BigVideo.js的加载过程,但不幸的是,Prelome.js完成后,背景视频开始加载。因此,同样的效果也会发生 我目前以以下方式调用BigVideo函数,如支持站点所述:Javascript 在加载BigVideo.js之前,小播放器出现在左上角,javascript,jquery,html,css,html5-video,Javascript,Jquery,Html,Css,Html5 Video,我试图在Bootstrap3.0.3-website中的一个中心容器后面实现背景视频 示例视频正在正确播放,但是,当加载页面时,在视频最终播放之前,左上角会出现一个小播放器: 如果您在Firefox中签出,您可以看到加载动画的分布 在显示内容和视频之前,我希望此加载动画以整个背景为中心并跨越整个背景,但是,没有提供令人满意的有效解决方案 不幸的是,我的JavaScript知识非常有限。我已经实现了隐藏BigVideo.js的加载过程,但不幸的是,Prelome.js完成后,背景视频开始加载。因
<!-- 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/CSS的解决方案将其设置为一个基本的“中心”点,然后使用Javascript最终确定细节。将html/body设置为100%高度,然后水平居中加载动画,并给它一个类似100px的顶部边距,这样您就知道,在所有设备和浏览器上,即使没有JS,也可以看到并居中加载动画。时期然后,使用javascript将其垂直居中。我看你已经把它修好了,这很好,这意味着你必须弄清楚如何用这种方法更好地定位它。请记住,某些安卓设备有一个固定位置的bug,其中固定的元素绝对是疯狂的,所以除非你准备好处理这个问题,否则我会采取另一种方法 HTML元素或body元素的背景应为#000以匹配加载程序。 这就是我要做的-在本例中,您有一个逐步增强的加载程序:)
此外,我会剪辑你的加载图形,只是装载机。我不知道你为什么在它周围有额外的空间,但这是不必要的。如果你想要整个背景是黑色的,你可以做我上面提到的(#000在身体背景上),或者如果你想要它周围的黑色区域像现在一样,你可以用一个div将它包裹起来,这个div有一个#000 bg的尺寸,并将其居中。这是减少页面加载时间的一个很好的范例-剪辑所有不必要的内容,特别是当您可以使用CSS时。如果您想继续使用预加载程序,您可以使用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'});
});
有关更多信息,请参见此处:这里有一个适合我的解决方案: CSS:
<!-- Preloader -->
<div id="preloader">
<div id="status"> </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>
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 */
}
#big-video-wrap {
display: none;
}
JAVASCRIPT:
BV.getPlayer().on('durationchange',function(){
$('#big-video-wrap').fadeIn();
});
以你的风格来说:
.vjs-control-bar {
display: none;}
问题是BigVideo.js的通用预加载程序没有加载到整个页面中(见图)。我使用了#preload div来隐藏BigVideo.js的一般加载过程,但这不起作用。BigVideo的加载过程随后才开始。所以问题是:如何在不使用额外预加载插件的情况下修复BigVideo.js预加载程序?比如这里:顺便说一句,如果你在Firefox中尝试这个链接,你会发现问题。预加载程序现在正在持续加载,而不是转到主要内容。下面的Javascript似乎没有做到这一点:如果你隐藏大的视频包装,你就隐藏了完整的背景视频。隐藏完整的视频背景,直到视频完全加载并准备播放。