CODEWITHSUNDEEP
javascript
StephenMeehan
StephenMeehan

Reputation: 1113

Pause html video that's on autoplay?

Thought it might be easier if I linked to some (partly) working code http://jsfiddle.net/StephenMeehan80/mfjtaco3/6/

The video autoplay is controlled by Javascript, and the pause/play button "works", but it needs to to be clicked twice the first time?

Is there a way to add videoAutoPlay into the EventListener?

document.addEventListener("DOMContentLoaded", function() {

            var video = document.getElementById('videoContent');
            videoAutoPlay = video.play();

            document.getElementById("playVideo").addEventListener("click", function(){              
                
                if(this.className == 'is-playing')
                {
                    this.className = "";
                    this.innerHTML = "Play"
                    video.pause();
                }
                else{
                    this.className = "is-playing";
                    this.innerHTML = "Pause";
                    video.play();
                }
            });
        });



    <button id="playVideo">Pause</button>

Upvotes: 3

Views: 2066

Answers (2)

lissettdm
lissettdm

Reputation: 13080

It is not working because `className is not a valid property. Use Element.classList.toggle:

var video = document.getElementById('videoContent');
videoAutoPlay = video.play();

document.getElementById("playVideo").addEventListener("click", function(){     
   this.classList.toggle('is-playing');     
   if(this.classList.contains('is-playing')) {
       this.innerHTML = "Play"
       video.pause();
   } else {
       this.innerHTML = "Pause";
       video.play();
   }
});

Upvotes: 3

Lygis
Lygis

Reputation: 100

on button click set videoPlaying to false. And your if else statement looks wrong. You have if videoPlaying is true do something. Else if videoPlaying is false put videoPlaying to false.

document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("playVideo").addEventListener("click", function(){
                
                var videoPlaying = true;
                var video = document.getElementById('videoContent');
                
                    if(videoPlaying)
                    {
                        
                        this.innerHTML = "Play"
                        video.play();                  
                    }
                    else{
                        this.innerHTML = "Pause";
                        video.pause();
                }
            });
        });
 const pauseResume = () => {
if(videoPlaying){
videoPlaying == false
}else{
videoPlaying == true
}

<button onclick= pauseResume()>pause/resume</button>

It should looks something like that.

Upvotes: 0

Related Questions