CODEWITHSUNDEEP
javascripthtml
Ishmael
Ishmael

Reputation: 31

how can i make my own toggle pause/play button work with my video?

I've been trying to make my own toggle pause/play button for the longest to no avail. Someone please help me out. I can't figure out what I'm doing wrong. Here's the code below:

  const wrapper = document.querySelector('.wrapper');
  const video = wrapper.querySelector('.dvid');
  const togglePause = wrapper.querySelector('.toggle-pause');
  const toggleSound = wrapper.querySelector('.toggle-sound');


function togglePlay() {
    const isPlaying = video.paused ? play : pause;
    video[isPlaying]();
}


function toggleBtn() {

  if (this.paused) {
      togglePause.innerHTML= '<img src="play.png">';
  }
  else {
      togglePause.innerHTML= '<img src="pause.png">';
  }
}

function toggleS() {

}

video.addEventListener('click', togglePlay);
video.addEventListener('pause', toggleBtn);
video.addEventListener('play', toggleBtn);
  <div class="wrapper">

      <video class="dvid" autoplay loop muted>
          <source src="2am freestyle.mp4" type="video/mp4"/>
          <p>This browser does not support this video</p>
      </video>


  <footer class="indexfooter">
    <div class="video-controls">
        <button class="toggle-pause">
          <img src="pause.png"> 
        </button>
        <button class="toggle-sound">
          <img onClick src="mute.png"> 
        </button>

    </div>

Any advice would be much appreciated. Thanks in advance.

Upvotes: 0

Views: 334

Answers (1)

Sameer
Sameer

Reputation: 5188

Problem is in this function, You added value as variable instead of string. If you open devtools there will be error stating Uncaught ReferenceError: pause is not defined

function togglePlay() {
    const isPlaying = video.paused ? 'play' : 'pause';
    video[isPlaying]();
}

Working example

const wrapper = document.querySelector('.wrapper');
const video = wrapper.querySelector('.dvid');
const togglePause = wrapper.querySelector('.toggle-pause');
const toggleSound = wrapper.querySelector('.toggle-sound');


function togglePlay() {
  const isPlaying = video.paused ? 'play' : 'pause';
  video[isPlaying]();
}


function toggleBtn() {
  if (this.paused) {
    togglePause.innerHTML = '&#9616;&nbsp;&#9612;';
  } else {
    togglePause.innerHTML = '&#9658;';
  }
}

video.addEventListener('click', togglePlay);
video.addEventListener('pause', toggleBtn);
video.addEventListener('play', toggleBtn);

togglePause.addEventListener('click', togglePlay);
<div class="wrapper">
  <video class="dvid" autoplay loop muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    <p>This browser does not support this video</p>
  </video>


  <footer class="indexfooter">
    <div class="video-controls">
      <button class="toggle-pause">&#9658;</button>
      <button class="toggle-sound">Toggle Sound</button>
    </div>
  </footer>
</div>

Updated

Call the same function when button is clicked

togglePause.addEventListener('click', togglePlay);

Upvotes: 1

Related Questions