Estoy creando un reproductor de video que redirige a otra página de video cuando el video termina.
Quiero agregar un 'Botón Desactivar reproducción automática' para deshabilitar el script de redirección.
¿Cómo puedo hacer eso?
Mi código:
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls> video not supported </video> <button id="turnOfAutoPlay">Turn Of Auto Play</button> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#myVideo").bind('ended', function() { setTimeout(function() { location.href = "http://www.localhost.com"; }, 3000) }); }); </script>Puede eliminar el oyente que se dispara al final usando unbind()
Para jQuery <1.7 use bind() / unbind()
$('#turnOfAutoPlay').click(function() { $('#myVideo').unbind('ended'); }) Nota: con jQuery 3.0 y versiones posteriores, .bind()/.unbind() está en desuso. Usar encendido() / apagado()
function videoEndedHandler () { setTimeout(function() { location.href = "http://www.localhost.com"; }, 3000) } $(document).ready(function() { document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler); }); $('#turnOfAutoPlay').on('click', function() { document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler); })Use la variable global para la función setTimeout y al hacer clic en su botón "Desactivar reproducción automática", llame a clearTimeout
Código de muestra:
var myVar; function myFunction() { myVar = setTimeout(function(){ alert("Hello"); }, 3000); } function myStopFunction() { clearTimeout(myVar); }Edito: aquí tienes
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls> video not supported </video> <button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var myVar; $(document).ready(function() { $("#myVideo").bind('ended', function() { myVar = setTimeout(function() { location.href = "http://www.localhost.com"; }, 3000) }); }); function myStopFunction() { clearTimeout(myVar); } </script>Modifiqué un poco mi código con la ayuda de las discusiones anteriores, pero creo que es un poco voluminoso 😅😅, pero funciona...
Mi código:
const autoplayCheckbox = document.getElementById('autoplayCheckbox'); const video = document.getElementById('myVideo'); var myVar; function videoEndedHandler () { myVar = setTimeout(function() { location.href = "http://www.localhost.com"; }, 10000) } //By default autoplay is on. $(document).ready(function() { video.addEventListener('ended', videoEndedHandler); }); autoplayCheckbox.addEventListener('change', function() { if (this.checked) { //if autoplay is on document.getElementById("demo").innerHTML = "Autoplay: On"; $(document).ready(function() { video.addEventListener('ended', videoEndedHandler); }); } else { //if autoplay is off document.getElementById("demo").innerHTML = "Autoplay: Off"; video.removeEventListener('ended', videoEndedHandler); } }); function myStopFunction() { clearTimeout(myVar); document.getElementById("autoplayCheckbox").checked = false; document.getElementById("demo").innerHTML = "Autoplay: Off"; } * { box-sizing: border-box; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; transition: background 0.4s linear; background-color: #8ecae6; font-family: 'oswald'; } .checkbox { opacity: 0; position: absolute; } .checkbox:checked + .label .ball { transform: translateX(23px); } .label { background-color: #111; display: flex; align-items: center; justify-content: space-between; border-radius: 50px; position: relative; padding: 5px; height: 26px; width: 50px; transform-scale(2.2); } .ball { background-color: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; height: 22px; width: 22px; transition: transform 0.3s linear; } <br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls> video not supported </video> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <!-- partial:index.partial.html --> <div> <input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked"> <label for="autoplayCheckbox" class="label"> <div class="ball"></div> </label> </div> <p id="demo">Autoplay: On</p> <button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/> El Turn Of Autoplay button solo funciona cuando la función de tiempo de Timeout de 10 segundos está activa. Agregué ese botón porque en el proyecto principal también funciona como un botón para descartar el modal Eche un vistazo
¿Puedo minimizarlo?