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>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>