JavaScript - PlayList Video HTML 5

 
Vista:
sin imagen de perfil

PlayList Video HTML 5

Publicado por David (3 intervenciones) el 09/09/2022 20:41:11
Estimados estoy desarrollando un reproductor de video en html, los videos llegan desde una base datos mediante un post con respuesta json y son asignados a un vector [].
Como puedo recorrer ese vector y reproducir uno a uno los videos de forma automatica?
Estoy trabajando de la siguiente forma y tengo algunos errores.
El problema lo tengo que al reproducir el último video me genera un error, si bien me reproduce todos los videos de la pirmer tanda, en la segunda si son 3 videos me reproduce 2.

Reproduzco el primero video y al finalizar en el evento addEventListener sigo recorriendo el listado de videos.

function ReproducirVideoCambioDireccionPoretiquera1(res) {
var count = Object.keys(res).length;
for (i = 0; i < count; ++i) {
videos[i] = res[i].direccionweb;
}
var reproductor = document.getElementById("mivideo")
reproductor.src = videos[0];
document.getElementById("mivideo").play();
contador = 0;
reproductor.addEventListener("ended", function ()
{
++contador;
reproductor.src = videos[contador];
document.getElementById("mivideo").load();
document.getElementById('mivideo').play();

}, false);
}
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

PlayList Video HTML 5

Publicado por Ivan (118 intervenciones) el 11/09/2022 09:39:13
Hola,

creo que es porque tienes un ligero desliz con tu variable contador.

Primero guardas los video en el bucle

1
2
3
for (i = 0; i < count; ++i) {
videos[i] = res[i].direccionweb;
}

Esto es de 0 a X videos

Luego inicias tu variable contador a 0 pero en el addEventListener en la primera linea incrementas ++contador, lo cual lo pone en 1 desde el primer ciclo y nunca lees el valor 0.

Simplemente pon el contador en la última linea y mira las diferencias entre ++contador y contador++ sólo como detalle informativo, es posible que intentes leer un video más por este detalle.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

PlayList Video HTML 5

Publicado por David (3 intervenciones) el 11/09/2022 18:22:09
Hola el problema lo tengo que no puedo finalizar la lista de reproducción sin que se repitan nuevamente los videos.
Reproducir...
vid1
vid2
vid3
terminar...
En respuesta a tu comentario:
"Luego inicias tu variable contador a 0 pero en el addEventListener en la primera linea incrementas ++contador, lo cual lo pone en 1 desde el primer ciclo y nunca lees el valor 0."
Incremento el contador en el evento por que el primero video ya fue reproducido, lo cual necesito desde el segundo. El problema es que al finalizar el tercer video no puedo salir del evento addEventListener entonces incrementa y ya busca un elemento que estar fuera del vector. Necesito terminar el evento o la lista al reproducir el último video.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

PlayList Video HTML 5

Publicado por ScriptShow (692 intervenciones) el 11/09/2022 17:08:21
Saludos David, he encontrado algo adaptable, sencillo...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay playsinline></video>
 
<script>
var vidSources = ["http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/movie.mp4"];
var vidElement = document.getElementById('video');
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
activeVideo = (++activeVideo) % vidSources.length;
if (activeVideo === vidSources.length){
activeVideo = 0;
}
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
</script>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

PlayList Video HTML 5

Publicado por David (3 intervenciones) el 11/09/2022 18:17:54
Hola Agregue la linea que esta entre /* */ para que me reproduzca el video y luego continua con el 2 y 3. Al finalizar el bucle vuelve a repetir los videos, es lo que no necesito que haga. Al finalizar vid3 necesito que la playlist no se repita, como podría?


function videoPrueba2() {
var vidSources = ['/Recursos/Videos/Vid1.mp4', '/Recursos/Videos/Vid2.mp4', '/Recursos/Videos/Vidr.mp4'];
var vidElement = document.getElementById('mivideo');
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];

/*
document.getElementById('mivideo').play();

*/
vidElement.addEventListener('ended', function(e) {
activeVideo = (++activeVideo) % vidSources.length;
if (activeVideo === vidSources.length){
activeVideo = 0;
}
vidElement.src = vidSources[activeVideo];
document.getElementById('mivideo').play();
});
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

PlayList Video HTML 5

Publicado por Ivan (118 intervenciones) el 11/09/2022 19:48:33
Hola,

para eliminar la reproducción de la playlist creo simplemente eliminando el addEventListener cuando el contador llegue a su fin debería funcionar.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar