当带有视频的背景 div 完成加载时，显示整个 div 加载答案

【问题标题】：While background div with video finishes loading, show entire div with loading当带有视频的背景 div 完成加载时，显示整个 div 加载
【发布时间】：2014-09-26 00:44:35
【问题描述】：

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

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

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

【问题讨论】：

你是如何加载视频的 .. 你使用的是最新的 html5 视频标签？？？
是的，我使用的是 html5 <video</video> 标签。

标签： javascript jquery html css html5-video

【解决方案1】：

您可以使用 jquery 来实现，如下所示：

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

【讨论】：

我如何知道视频已加载并因此再次显示？

【解决方案2】：

我建议像这样在 jQuery load() 上使用回调 >>>

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

【讨论】：

这会使页面无限循环，直到崩溃。

【解决方案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

【讨论】：