CODEWITHSUNDEEP
htmlcsshtml5-video
0x01Brain
0x01Brain

Reputation: 818

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

I have a video that I'm setting as background in my HTML code:

<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>

The CSS For It:

#container {

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

}

The JS function I' m using to set the background and also to reset it when user resize the 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);

    });
}

});

The problem that i have is when i click refresh in my web browser the video doesn't get loaded and i get the poster of the video which i have in my computer, how can i bypass the problem? I was thinking to set a timeout delay, hide the body contents and check it in a for loop until the $("video").readState() === 4 and then show the contents of the body, but nothing happens.

Upvotes: 0

Views: 1459

Answers (1)

Amit.S
Amit.S

Reputation: 441

Try adding onplay event to the video and call your js function to display the body when the video starts and by default set body display to 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>

Upvotes: 1

Related Questions