Para un próximo proyecto, estoy empezando a experimentar un poco con video html5. Escribí una pequeña clase para administrar videos.

 const videoLayer = document.getElementById( "videoLayer" ); class videoPlayer { constructor( id, source ){ this.id = id; this.source = source; videoLayer.innerHTML += `<video id="${ this.id }"> <source src="${ this.source }" type="video/mp4"> </video>`; this.element = document.getElementById( this.id ); this.element.onended = () => { this.stop(); } this.hide(); } show(){ this.element.style.display = "inline"; } hide(){ this.element.style.display = "none"; } goToStart(){ this.element.currentTime = 0; } play(){ this.show(); this.element.play(); } pause(){ this.element.pause(); } stop(){ this.pause(); this.hide(); this.goToStart(); } toggle(){ this.show(); this.element.paused ? this.element.play() : this.element.pause(); } }

Con solo una instancia, todo funciona bien. Pero con varias instancias, solo funciona la última instancia. Si uso .play() en la primera instancia, solo comienza a reproducirse el audio. Si observo "inspeccionar elemento", puedo ver que la propiedad de visualización sigue mostrando "ninguno". Lo extraño es que si agrego las siguientes líneas a la consola, todo funciona bien.

 const test = document.getElementById( theRightId ); test.style.display = "inline"; test.play();

Si agrego la línea debajo de la función show, devuelve el elemento correcto en la consola. Sin embargo, allí indica que el valor de visualización es "en línea".

 console.log( this.element );

Así que sospecho que algo está interfiriendo con el valor de visualización después de la ejecución.

Y por último, si cambio el orden de las instancias, todas funcionan siempre que sean la última instancia creada.

¿Algunas ideas?