1

Tengo un sitio HTML5 fuera de línea (por ahora, para el trabajo) de vídeos que, al terminar el vídeo, setInterval, pasa a otra página de vídeo. Lo que no puedo lograr es suspender el setInterval o el contador para que al recargar la página, quede guardado en localStorage el ajuste del botón-setInterval (que sería no contar).

Me podrían ayudar?

<button id="auto" class="auto" onclick="cancelar()">
en <span class="counter">10</span> <span class="red">ó cancelar</span>  
</button> 

Este es el código que uso:

 var seguir = false;
 var boton = false;

 var c = 

document.querySelector(".auto");  
 c.addEventListener("click", cancelar); 

 function cancelar() { 

  if (!seguir) {

   seguir = false;
   clearInterval(yo);

//$(".auto").css({"background": "#ccc", "color": "#000"});  
localStorage.setItem('boton-mode', false');
} else {

   seguir = true;


localStorage.setItem('boton-mode', true);  

  };

 };

Y por supuesto, mi contador funciona bien:

// AL FINALIZAR VÍDEO
 var y = $(".yoFin");

 $("#video").on("ended", function() {  

  y.show().css({"display": "flex"});
  var counter = 10;

  yo = window.setInterval( function() {  

   if (counter == 0) {
window.location.href = "yo.html";
   } else {
counter = counter - 1;

document.querySelector(".counter").innerHTML = counter;  
   }

  },1000);

 });

Al parecer estoy usando JavaScript puro mezclado con jQuery.

3
  • 1
    Es mejor trabajar con eventos, opino yo. el 11 dic. 2020 a las 17:20
  • Mi problema es que no se casi nada de JavaScript ni cómo estructurar el 11 dic. 2020 a las 18:41
  • Trataré de darte una respuesta en cuanto pueda. Saludos el 11 dic. 2020 a las 18:59

1 respuesta 1

1

Aunque tu código está incompleto (le falta parte del HTML) y la pregunta es algo confusa (no se entiende muy bien lo que pretendes lograr), intentaré responder de acuerdo a lo que comprendo del problema.

PROBLEMA

Se desea almacenar un valor en el objeto localStorage, el mismo será luego capturado al momento de recargar una página o ser redirigido a otra.

La idea es mantener actualizado el estado de un botón al momento de la reproducción de un medio incrustado en la página.

SOLUCIÓN

Lo primero que debemos conocer es cómo funciona el objeto localStorage. Es muy sencillo y simple: se establece un par clave - valor usando el método setItem() y se obtiene el valor de una clave usando el método getItem().

Usando el objeto localStorage podemos almacenar el valor del estado del botón, que presumo que debe activarse sólo al momento de finalizar la reproducción del vídeo y estar activo un tiempo prudencial antes de recargar o redirigir la página.

El botón permitirá cancelar la acción automática (cancelar el setInterval) y evitar que la página se recargue. Al menos es lo que me parece que deseas lograr con este botón. Y que al momento de recargar la página manualmente, el botón guarde el último estado.

Sin saber el contenido del documento que deseas cargar o al que deseas redirigir sólo puedo suponer que es el mismo documento (yo.html).

En dicho documento podrías tener el siguiente script:

// el siguiente código se asume dentro de un tag <script> antes del  tag de
// cierre del documento: </body>

// creamos las variables que se almacenarán en el localStorage
// y las iniciamos en sus valores por defecto
let contador = 10;
let botonActivo = true;
let intervalId;
let video = document.getElementById('video');
let botonCancelar = document.getElementById('cancelar');
let spanContador = document.getElementById('contador');

// verificamos si existe el elemento en el localStorage y actualizamos
// esto se ejecutará siempre que la página se recargue.
if(localStorage.getItem('botonActivo')) {
  // es un valor booleano
  botonActivo = localStorage.getItem('botonActivo') === 'true' ? true : false);
}

// ahora establecemos la función que se ejecutará al pulsar el botón
const cancelar = (event, interval)  => {
  if(!interval) return;
  clearInterval(interval);
  botonActivo = false;
  localStorage.setItem('botonActivo', botonActivo);
  botonCancelar.setAttribute('disabled', 'disabled');
}

// añadimos el manejador al evento "click" del botón
botonCancelar.addEventListener('click', event => cancelar(event, intervalId));

// añadimos el manejador al evento "ended" del video
video.addEventListener('ended', event => {
  // las siguientes acciones sólo se llevarán a cabo si el botón está activo
  if(botonActivo) {
    let botonCancelar = document.getElementById('cancelar');
    if(botonCancelar.hasAttribute('disabled')) {
      botonCancelar.removeAttribute('disabled');
    }
    intervalId = setInterval(() => {
      if(contador < 1) {
        clearInterval(intervalId);
        botonActivo = true;
        localStorage.setItem('botonActivo', botonActivo);
        window.location.href = 'yo.html';
      } else {
        contador--;
        document.getElementById('contador').innerText = contador;
      }
    }, 1000);
  }
});

Con esto tienes una funcionalidad básica para almacenar el estado del botón en el objeto localStorage.

Para simular este código, vamos a crear nuestro propio elemento localStorage en el snippet, y la redirección la simularemos mediante la reproducción cíclica del vídeo. Lo que me interesa mostrar es la funcionalidad del código descrito anteriormente. Al presionar el botón cancelar, se establece el valor en el objeto localStorage para botonActivo a false.

let contador = 10;
let botonActivo = true;
let intervalId;
let video = document.getElementById('video');
let botonCancelar = document.getElementById('cancelar');
let spanContador = document.getElementById('contador');

// creamos nuestro elemento `localStorage` personal. Lo llamaremos _localStorage.

let _localStorage = {
  setItem: function(itemName, value) {
    if(!itemName || typeof itemName !== 'string') return;
    this[itemName] = value.toString();
  },
  getItem: function(itemName) {
    return this[itemName];
  }
}

// la siguiente función devuelve el estado del boton
// simula la carga del documento y lee _localStorage
const getBotonActivo = () => {
  if(_localStorage.getItem('botonActivo')) {
    // es un valor booleano
    return _localStorage.getItem('botonActivo') === 'true' ? true : false;
  }
  // si no está establecido el valor, se devuelve true
  // se entiende que debe estar activo para la primera
  // carga del documento
  return true;
}

// leemos el valor de _localStorage
botonActivo = getBotonActivo();

// ahora establecemos la función que se ejecutará al pulsar el botón
const cancelar = (event, interval) => {
  if(!interval) return;
  clearInterval(interval);
  botonActivo = false;
  _localStorage.setItem('botonActivo', botonActivo);
  botonCancelar.setAttribute('disabled', 'disabled');
}

// añadimos el manejador al evento "click" del botón
botonCancelar.addEventListener('click', event => cancelar(event, intervalId));

// añadimos el manejador al evento "ended" del video
video.addEventListener('ended', event => {
  // las siguientes acciones sólo se llevarán a cabo si el botón está activo

// simulamos la carga del valor
  botonActivo = getBotonActivo();
  
  if(botonActivo) {
    if(botonCancelar.hasAttribute('disabled')) {
      botonCancelar.removeAttribute('disabled');
    }
    intervalId = setInterval(() => {
      if(contador < 1) {
        clearInterval(intervalId);
        botonActivo = true;
        _localStorage.setItem('botonActivo', botonActivo);
        botonCancelar.setAttribute('disabled', 'disabled');
        contador = 10;
        spanContador.innerText = contador;
        video.currentTime = 0;
        video.play();
      } else {
        contador--;
        spanContador.innerText = contador;
      }
    }, 1000);
  }
});
<video id="video" controls="controls" preload="none" width="224" height="128"><source src="https://dl5.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"></video>
<br>
<button id="cancelar" disabled><span id="contador">10</span> Cancelar</button>

Si he entendido bien la pregunta, esta sería una forma de parar el contador al momento de hacer clic en el botón cancelar, el estado del botón se guardaría en `localStorage``y al recargar la página, se establecería el estado del mismo de acuerdo al valor almacenado. Eso hace que el proceso de carga o redirección automática se detenga una vez que se ha presionado el botón de cancelar.

1
  • Gracias amigo por esta tu ayuda. Y creo que te llevo tiempo muy valioso que valoro mucho. Llevo mucho tiempo queriendo hacer lo siguiente: es igual que YouTube. Pero mi base de datos es localStorage. Sólo quiero guardar el estado del botón, y si está cancelado, también está cancelado el setInterval o el contador. Estoy trabajando solamente en mi equipo, sin internet, para ver mis videos en mi navegador. Ahora este tu código es algo nuevo para mi; voy a trabajar en ello y luego agradecerte con un feliz año nuevo. el 28 dic. 2020 a las 14:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.