Para hacer que el video se reproduzca cuando alguien hace clic en el botón de reproducción, el botón debe convertirse en el ícono de pausa para mostrar que puede reproducir y pausar. En este momento, el video no se reproduce cuando hago clic en el botón de reproducción. Hay un mensaje de error que dice que playPause no está definido.
ERROR
1(index):131 Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclickHTMLJS _
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>Intente eliminar el evento onclick del propio botón. Eso es lo que está causando el 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>