Play/Pause HTML Video Based on Visibility | JavaScript

41
Published on September 28, 2022 by

Watch this video and learn how you can play a video when it is completely visible in the browser window and subsequently pause it when it is not visible.

►►►SUBSCRIBE for more: https://www.youtube.com/c/codefirst?sub_confirmation=1 />
———-My Social Links:
🔴 My Channel:
https://www.youtube.com/c/codefirst
🔴 View Playlists: https://www.youtube.com/c/codefirst/playlists
🔴 My Github: https://github.com/Nitij

Category

Add your comment

17 Comments

  • Narottam World 2 years ago

    Can you please tell how i can redirect to another place after a video is ended…

  • Karan Parwani 2 years ago

    how can I autoplay on scroll without clicking on play manually

  • PRIYANKA MAHARANA 2 years ago

    5minuts long video, i just want to pause the video after 2minuts playing automatically.how could i do it please help me out

  • Amokachi Anthony 2 years ago

    Thanks so much for this video, please I am trying to do this with videos from mysql database it working but only one of them are playing is there tips for that?

  • Creative Marketing Nerds 2 years ago

    I am getting the following error: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

  • UNLÎMITËD 2 years ago

    Notice that for days I want to make a button, play and pause that plays an external streaming, but there is no way to do it, I do not know if you will have any video to teach, only that I can pause and play, but with external audio, the IP of the audio I have it, but I do not want that ugly player that looks, very ugly :(, please help bro

  • PETER TODOROV 2 years ago

    it is good but there are few fallbacks.when is half visible and button play is clicked the video starts.and when become fully visible it stops.

  • muddasar habib 2 years ago

    its working for first video ?

  • Ujen Basi 2 years ago

    what to do if I want to add more videos like Facebook, Instagram, etc has.

  • Nagma Parveen 1 year ago

    sir it works only for single video if i add more than one video then second video will not autoplay even it is visible on the screen please help me

  • Adewunmi Agbato 1 year ago

    Great work! Perfect relieve for me. Thanks a million!

  • Kishan Patel 12 months ago

    Awesome Tutorial. I spent lot of hours on another solutions to achieve the same functionality like this. It really helped me a lot. Thanks bro.

  • Amit Dwivedi 10 months ago

    Can you please give one more example with handling multiple video play/pause & mute / unmute

  • Mr LaaLys 9 months ago

    thank u for that <3

  • Upam 5 months ago

    <script>

    let options = {

    root:null,

    rootMargin:'0px',

    threshold:1.0

    };

    let callback = (entries, observer)=>{

    entries.forEach(entry => {

    if(entry.target.id=='##')

    {

    if(entry.isIntersecting){

    entry.target.play();

    }

    else{

    entry.target.pause();

    }

    }

    });

    }

    let observer = nwe IntersectionObserver(callback, options);

    observer.observe(document.querySelector('##'));

    </script>

  • SMOCKY DE DALY 4 months ago

    Very good bro…
    Felicitation, i find my satisfaction in it.

  • momslayer66 3 months ago

    i think it is very cool

    u