So i had this working at one point eventually i broke it and now i need to get it working again.

I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.

HTML:

<video id="myVideo" width="1024" height="576">
  <source src="myaddiction.mp4" type="video/mp4">
  <source src="myaddiction.mp4.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video.
</video>

<button id="button" onclick="playPause(); ">PLAY</button>

SCRIPT:

var vid = document.getElementById("myVideo");

function playPause() {
  vid.play();
}

function playPause() {
  vid.pause();
}




function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
  } else {
    change.innerHTML = "PLAY";
  }
}

Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!

/

**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.

So i had this working at one point eventually i broke it and now i need to get it working again.

I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.

HTML:

<video id="myVideo" width="1024" height="576">
  <source src="myaddiction.mp4" type="video/mp4">
  <source src="myaddiction.mp4.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video.
</video>

<button id="button" onclick="playPause(); ">PLAY</button>

SCRIPT:

var vid = document.getElementById("myVideo");

function playPause() {
  vid.play();
}

function playPause() {
  vid.pause();
}




function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
  } else {
    change.innerHTML = "PLAY";
  }
}

Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!

https://jsfiddle/wb83hydn/

**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.

• javascript
• jquery
• html
• video

Share Improve this question Follow asked Mar 9, 2017 at 19:20 Warren BreedloveWarren Breedlove 10533 silver badges99 bronze badges 1

• 1 First issue you have is that you have 3 functions with the same name. – earl3s Commented Mar 9, 2017 at 19:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You are defining your playPause function 3 separate times. You are likely to get some unexpected results. That is, if the interpreter doesn't error out pletely. You will be better served with just creating one function, and use a global variable to handle the tracking of the play/pause state. Something like this:

var vid = document.getElementById("myVideo");
var isPlaying = false;

function playPause() {
  var change = document.getElementById("button");
  if (isPlaying) {
    vid.pause();
    change.innerHTML = "PLAY";
  } else {
    vid.play();
    change.innerHTML = "PAUSE";
  }
  isPlaying = !isPlaying;
}

Change your javascript to this to make it work. You'll need to make sure the DOM is loaded first by using window.onLoad or putting the JS at the end of the HTML file.

I updated the JSFiddle, but you'll need a valid online video file to make it work.

var vid = document.getElementById("myVideo");

function play() {
  vid.play();
}

function pause() {
  vid.pause();
}

function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
    play();
  } else {
    change.innerHTML = "PLAY";
    pause();
  }
}

https://jsfiddle/wb83hydn/3/

Play and pause video by the same button

     document.getElementById("play").onclick = function() {

         if(document.getElementById("video").paused){
         document.getElementById("video").play();
             this.innerHTML ="Pause";

         }else{
             document.getElementById("video").pause();
             this.innerHTML = "Play";
         }
     }