个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 11:23:09 28 4
gpt4 key购买 nike

我在我的 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 函数:

$(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 然后显示内容 body ，但没有任何反应。

最佳答案

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

//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 - 如何等待 HTML 中的视频背景直到它完成然后查看正文部分的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32598188/

28 4 0
文章推荐： javascript - 将鼠标悬停在一个元素上会导致其他元素发生变化
文章推荐： c++ - 在文本文件中查找单词以使用 C++ 提取数据
文章推荐： c++ - 从 Boost Asio 套接字获取端口
文章推荐： javascript - 如何从网页中打开一个小方框进行选择
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com