CODEWITHSUNDEEP
javascripthtml
Brandon Powell
Brandon Powell

Reputation: 83

playPause is not defined (Not Play the Video)

In order to make video play when someone clicks on the play button, the button must become the pause icon to show that you can play and pause. Right now, the video does not play when I click on the play button. There is an error message that says playPause is not defined.

ERROR

1(index):131 Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclick

HTML JS

jQuery(document).ready(function($){
    var ppbutton = document.getElementById("vidbutton");
    ppbutton.addEventListener("click", playPause);
    myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
            ppbutton.innerHTML = "Pause";
            }
        else  {
            myVideo.pause();
            ppbutton.innerHTML = "Play";
            }
    }
});
<div class="hero">
  <div class="container">
      <div class="wrapper">
          <div class="row">
          <div class="video">
            <video height="369px" width="610px" muted id="video1" poster="assets/img/photo.jpg">
                <source src="/assets/video/bjp__video.mp4" type="video/mp4">
                <source src="/assets/video/bjp__video.webm" type="video/webm">
            </video>

            <div class="name">
                <img alt="name" src="assets/img/bjp_title.png">
            </div>
          </div>


          <div class="info__hero__content">
              <p>I help  <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span>  to find their hide abilities and resources for their businesses.</p>
          </div>
      </div>
      </div>
  </div>
</div>

<div>
  <div class="play__btn">
      <button id="vidbutton" onclick="playPause()">
        <img alt="play button" src="/assets/img/play__button.svg">
      </button>
  </div>
  <div class="line"></div>
</div>

Upvotes: 1

Views: 336

Answers (1)

cssyphus
cssyphus

Reputation: 40038

Try removing the onclick event from the button itself. That is what is causing the error.

jQuery(document).ready(function($){
    var ppbutton = document.getElementById("vidbutton");
    ppbutton.addEventListener("click", playPause);
    myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
            ppbutton.innerHTML = "Pause";
            }
        else  {
            myVideo.pause();
            ppbutton.innerHTML = "Play";
            }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
  <div class="container">
      <div class="wrapper">
          <div class="row">
          <div class="video">
            <video height="169px" width="410px" id="video1" poster="https://ourtube.co.uk/upload/photos/2021/11/928b8656defe100bf7c75815db0edf992b1e33d2wK9QTHR7ny9ahCHqPYKf.video_thumb_5245_11.jpeg">
                <source src="https://ourtube.co.uk/watch/TMaamxje77GKe9q" type="video/mp4">
            </video>

            <div class="name">
                <img alt="name" src="assets/img/bjp_title.png">
            </div>
          </div>

          <div class="info__hero__content">
              <p>I help  <span><b>people with disabilities</b></span> and <span><b>entrepreneurs</b></span>  to find their hide abilities and resources for their businesses.</p>
          </div>
      </div>
      </div>
  </div>
</div>

<div>
  <div class="play__btn">
      <button id="vidbutton">
        <img alt="play button" src="https://brandnewtube.com/themes/youplay/img/icon.png"> Play
      </button>
  </div>
  <div class="line"></div>
</div>

Upvotes: 1

Related Questions