I want to have my video automatically play and loop for me when the user scrolls to a specific area on the video element. I'm aware that I can use a JS observer to do this: however, how do I use JavaScript to add and remove 'autoplay'?

What I want my default code to be:

<video loop muted>
     <source src="/videos/my_video.mp4" type="video/mp4" >
</video>

What I want to happen when the user triggers the JS observer:

<video loop muted autoplay>
     <source src="/videos/my_video.mp4" type="video/mp4" >
</video>

I want to have my video automatically play and loop for me when the user scrolls to a specific area on the video element. I'm aware that I can use a JS observer to do this: however, how do I use JavaScript to add and remove 'autoplay'?

What I want my default code to be:

<video loop muted>
     <source src="/videos/my_video.mp4" type="video/mp4" >
</video>

What I want to happen when the user triggers the JS observer:

<video loop muted autoplay>
     <source src="/videos/my_video.mp4" type="video/mp4" >
</video>

• javascript
• html

2 Answers 2

 document.querySelector('video').autoplay = true;

document.querySelector('video').play();

or also

document.querySelector('video').pause();