如何等待 HTML 中的视频背景完成，然后查看正文部分的内容？

Question

我在 HTML 代码中设置了一个视频作为背景：

<video id="video" autoplay loop poster="poster.jpg" muted>
<source src="vid-bg.mp4" type="video/mp4">
<source src="vid-bg.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>

CSS 为之：

#容器{

position: absolute;
overflow: hidden;
opacity: 0.6;

}

我用来设置背景并在用户调整大小时重置背景的 JS 函数 window:

$(function() {


// IE detect
function iedetect(v) {

    var r = RegExp('msie' + (!isNaN(v) ? ('\s' + v) : ''), 'i');
    return r.test(navigator.userAgent);

}

// For mobile screens, just show an image called 'poster.jpg'. Mobile
// screens don't support autoplaying videos, or for IE.
if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {

    (adjSize = function() { // Create function called adjSize

        $width = $(window).width(); // Width of the screen
        $height = $(window).height(); // Height of the screen

        // Resize image accordingly
        $('#container').css({
            'background-image' : 'url(poster.jpg)', 
            'background-size' : 'cover', 
            'width' : $width+'px', 
            'height' : $height+'px'
        });

        // Hide video
        $('video').hide();

    })(); // Run instantly

    // Run on resize too
    $(window).resize(adjSize);
}
else {


    // Wait until the video meta data has loaded
    $('#container video').on('loadedmetadata', function() {

          // for debugging          
        //alert('we are here');

        var $width, $height, // Width and height of screen
            $vidwidth = this.videoWidth, // Width of video (actual width)
            $vidheight = this.videoHeight, // Height of video (actual height)
            $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in

        (adjSize = function() { // Create function called adjSize

            $width = $(window).width(); // Width of the screen
            $height = $(window).height(); // Height of the screen

            $boxRatio = $width / $height; // The ratio the screen is in

            $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size

            // Set the container to be the width and height of the screen
            $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 

            if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                // Set the width of the video to the screen size multiplied by $adjRatio
                $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
            } else {
                // Else just set the video to the width of the screen/container
                $vid = $('#container video').css({'width' : $width+'px'});
            }

        })(); // Run function immediately

        // Run function also on window resize.
        $(window).resize(adjSize);

    });
}

});

我遇到的问题是，当我在我的网络浏览器中单击刷新时，视频没有加载，我得到了我电脑中的视频海报，我该如何绕过这个问题？我想设置一个超时延迟，隐藏正文内容并在 for 循环中检查它直到 $("video").readState() === 4 然后显示正文内容，但没有任何反应。

Answer 1

尝试向视频添加 onplay 事件并调用您的 js 函数以在视频开始时显示正文，默认情况下将正文显示设置为 none:

//By default  loading animation will show and in onPlay hide that animation
<body  onload="vidLoading()">
    <script>
    function onPlay()
    {
        $('.bodyWrapper').css("display","block"); //show the body of the html page
        $('.animationDiv').css("display":"none");
    }
    </script>
    <div class="bodyWrapper" style="display:none">
        <video id="video" autoplay loop poster="poster.jpg" muted onplay="onPlay()">
        <source src="vid-bg.mp4" type="video/mp4">
        <source src="vid-bg.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
        </video>
    </div>
    <div class="animationDiv">Animation Div</div>

</body>

如何等待 HTML 中的视频背景完成，然后查看正文部分的内容？

How to wait for a video background in HTML until it finish and then view the contents of body section?

html

css

html5-video