On touch hide video and showing it from beginning after 5 min

hi Aill,
i am pretty new with JavaScript and have a question regarding script that i am writing. I have a video in on layer and content in another div. I would like the video to play and loop until somebody touch the screen, after 5min of no use, the vide div should appear again and begin from the begging.

Here is my code:

    setInterval(function(){
        if ($("#static_content").is(":visible")){
            $("#static_content").hide().siblings().show();
        }else{
            $(".next_video").hide().siblings().show();
        }
        
    }, 5000);


<div id="content">
                <div class="next_video" id="hide">
                  <video autoplay loop >
                    <source src="video/final.mp4" type="video/mp4">
                  </video>
                </div>

<div id="static_content">
        <article>
        <p> this is the content that is static</p>
        </article>
</div>

</div>

Please help figure out how to do this effect. Now the video is hiding and showing every 5 seconds, but it does not play from the beginning.

thanks

You will need to get rid of the setInterval, and instead attach en event to trigger at the end of video.

You can find some good info on video events at https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.