Question

我有一个div，背景视频大小约为6mb。我希望显示整个页面，直到该视频完成加载。

我在很多网站上看过，特别是电影（最近的）有背景视频，在他们显示页面之前，就像一个加载屏幕。

我怎样才能做到这一点？我一直在寻找，但到目前为止，没有运气。如果您可以这样称呼它，是否有此技术的特定名称？

Answer 1

您可以使用jquery来实现以下目标：

  $(window).load(function() {
    $('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
  });

Answer 2

我建议在jQuery load（）上使用回调，像这样＆gt;＆gt;＆gt;

<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
    $('#videoHolder').show();
    $('#loadrHolder').hide();
});
});
</script

Answer 3

如果您使用jquery.videoBG（http://syddev.com/jquery.videoBG/）这样的库来显示视频，我认为您可以修改代码以在加载视频时显示您的网页。

HTML：

<body>
    <div id="dvLoading">Loading...</div>
    <div id="dvContent" style="display:none"></div>
</body>

库中的Javascript：

$video.bind('canplaythrough',function() {
    $('#dvLoading').hide();
    $('#dvContent').show();
});

您可以在此处找到视频元素的事件列表：http://www.w3schools.com/tags/ref_av_dom.asp

虽然背景div与视频完成加载，显示整个div与加载

3 个答案: