Funcion Reiniciar reproduccion - Video Ended

[braiand]

Hola, tengo esta funcion en jquery que me recorre una lista de videos que estan en el codigo html y me gustaria que al terminar de reproducir el ultimo me redireccione a otra pagina. Alguno sabe como capturar ese evento?

Mi codigo de la funcion:

http://pastebin.com/itzq7eA7

Si necesitan el codigo completo me avisan y lo comparto.

Muchas gracias.

Braian

[Alexis88]

Primero necesitas saber cuál es el último vídeo de la lista, en base a ese dato, realizas lo que buscas.

Saludos

[braiand]

Hola, gracias por la respuesta. Estaba pensando en eso mismo.
Aca tengo el codigo completo:

http://pastebin.com/vyP9di30

Estaba pensando en preguntar cada vez si termina un video si es el video con un "id" especial como "ultimo" o algo asi y en base a eso redireccionar, pero no me estaba saliendo, no se si se puede o si lo estoy haciendo tan mal con la sintaxis que no anda ni para atras.
Tambien pense en agregarle un <video> con el <src= ""> para que no reproduzca nada y asi indicar que es el ultimo, pero no sabia como hacer referencia a eso para que el jquery lo tome en la condicion de un if.
Muchisimas gracias!

Braian

[Alexis88]

Veo que tienes varios elementos <video>, lo cual me parece innecesario. Podrías tener un array con los nombres y rutas de los vídeos y los reproduces uno por uno en el elemento <video>. Cuando acabe la reproducción del vídeo actual, verificas si es el último vídeo del array, de serlo, realizas la redirección, caso contrario, reproduces el siguiente.

Código Javascript:

var reproductor = document.getElementById("reproductor"), //El elemento <video>
    videos = ["video1.mp4", "video2.mp4", "video3.mp4"]; //Lista de vídeos
 
reproductor.src = videos[0]; //Asigno al primer vídeo
reproductor.play(); //Lo reproduzco
 
reproductor.addEventListener("ended", function(){ //Cuando finalice el vídeo actual
    var nombreActual = this.src.substr(this.src.lastIndexOf("/") + 1); //Vídeo actual
        actual = videos.indexOf(decodeURIComponent(nombreActual)); //Posición en array
 
    if (actual == videos.length - 1) //Si es el último vídeo
        window.location = "ejemplo.html"; //Redirecciono
    else{ //Caso contrario
        this.src = videos[++actual]; //Asigno al siguiente vídeo
        this.play(); //Lo reproduzco
    }
}, false);
 

Utilizo a la función decodeURIComponent para decodificar el valor del atributo src del elemento <video> ya que si el nombre contiene espacios, estos serán reemplazados por esto: %20, con lo cual nunca se podría encontrar el nombre del vídeo en el array.

Saludos

[braiand]

Lo hice asi porque el codigo HTML esta metido en el php, eso es lo que se ejectura del lado del cliente. Lo tengo en PHP porque tengo una funcion que me lee el directorio y me devuelve un array con la lista de archivos con formato webm y mediante un for incrusto tantos <video ...> como archivos tenga. Se que no es lo mas elegante del mundo, pero es la unica forma que supe implementar. Esto tambien debido a que cada vez que se recargue la pagina se vuelve a leer el directorio, ya que puede haber videos agregados o eliminados, por eso la necesidad de recrear el array.
No se si me explique bien, espero que me puedas entender y desde ya muchas gracias!

Braian

[Alexis88]

Lo de generar la lista de vídeos en el lado del servidor, se entiende, pero insisto en que es innecesario crear un elemento <video> por cada archivo de vídeo encontrado. En tal caso, mediante una petición asíncrona (Ajax), obtén la lista de vídeos, la cual deberá ser un array para que luego puedas reproducir los vídeos uno tras otro, como en el ejemplo que mostré. Para esto, tendrás que tener aparte al archivo PHP que hace la consulta y genera la lista de archivos de vídeo encontrados, para así realizar la petición asíncrona.

Saludos

[braiand]

Perdon, me olvide. Este es el codigo completo:

http://pastebin.com/8qWGDfTL

Saludos!

[braiand]

Hola, hice lo que me dijiste. Separe el codigo PHP que realiza la lectura del directorio y luego codifico a JSON el array. Luego desde el archivo HTML defino una funcion para convertir el array JSON a un array de javascript.
Mi problema es que estoy tratando de pasarle el array de una funcion a otra, el que la toma del JSON y la que reproduce los videos, creo que la estoy declarando mal.
Y tambien no estoy entendiendo bien como incluir el reproductor dentro del HTML para que sea visible en el navegador.

http://pastebin.com/yYaBxwC9

Muchisimas gracias!

Braian

[Alexis88]

Sería mejor que ejecutes el loop de reproducción de vídeos en la misma función en la que recibes la respuesta del archivo PHP.

Código Javascript:

$.ajax({
    url: "funcion.php",
    dataType: "JSON"
}).done(function(respuesta){
    reproductor.src = videos[0];
    reproductor.play();
 
   //El resto del código
});
 

Y no te hagas problemas con el elemento <video>, colócalo en el cuerpo del documento pero asegúrate de que esté antes del script, lo ideal es que el script esté justo antes de la etiqueta </body> para que así surta efecto.

Saludos

[braiand]

Gracias por contestar todas las cosas que te pregunto y perdon por entender solo la mitad jejeje Me surgio este proyecto y la verdad que estoy aprendiendo a la fuerza lo necesario para poder terminarlo.
Lo que hice fue unir las dos funciones [URL="http://pastebin.com/r5HU08Rb"]Codigo[/URL] y las movi al <HEAD>. No se si estara retornado bien, pero probe la funcion de PHP mil veces por separado y hace lo que tiene que hacer.
Por otro lado decis que solo poniendo en el <BODY> un <DIV id="reproductor"></DIV> se deberia ejecutar? O me esta faltando algo? No me estoy dando cuenta porque no veo que sea como una funcion que ya estuve mirando de javascrip o jquery que tengan un nombre como para invocarlas al estilo "onclick=reproductor()", me explico?
Gracias, muchas gracias!

Braian

[Alexis88]

Iniciado por Alexis88

Y no te hagas problemas con el elemento <video>, colócalo en el cuerpo del documento...

Debes de leer con paciencia.

La sugerencia de colocar el código JS justo antes de la etiqueta </body> es para que sí o sí se ejecute luego de la carga del DOM, puedes hacer de otra forma, pero de la manera en que te explico, no hay pierde. Para que el proceso se ejecute automáticamente, utiliza una función anónima autoejecutable.

Código Javascript:

(function(){
    //Código
})();
 

Saludos

[braiand]

Hola, Alexis, gracias por las respuestas y la paciencia sobretodo, trate de limpiar un poco el codigo y lo meti todo dentro de una funcion autoejecutable. Tambien tengo la etiqueta video con el id "reproductor" pero sin anda adentro, no se si tengo que agregarle algo mas.
Por otro lado es la primera vez que uso AJAX y en ejemplos que busque usaban el "type=POST" en vez del "datatype=JSON" no se de que dependera. Tambien tengo una variable "data{}" que no estoy muy seguro si esta bien donde esta ubicada o si se puede obviar.

Asi es como esta ahora:

http://pastebin.com/aiw01Qx3

Se que algo le acomodar porque siguen sin poder reproducirse los videos.
Muchas gracias, como siempre, un saludo!

Braian

[Alexis88]

No entiendo por qué usas un <div> cuando deberías usar un elemento <video> para visualizar los vídeos. Por otro lado, no estás usando bien el método Ajax, no puedes declarar una variable así de buenas a primeras, recuerda que dentro de dicho método, hay un objeto literal, de manera que lo que haces está mal.

Acomodando un poco el código, debería funcionar así:

Código Javascript:

(function(){
    $.ajax({
        url: "funcion_array.php",
        dataType: "JSON"
    }).done(function(respuesta){
        var reproductor = document.getElementById("reproductor"),
            videos = respuesta;
         
        reproductor.src = videos[0];
        reproductor.play();
                                 
        reproductor.addEventListener("ended", function(){
             var nombreActual = this.src.substr(this.src.lastIndexOf("/") + 1);
                  actual = videos.indexOf(decodeURIComponent(nombreActual));
                                 
             if (actual == videos.length - 1)
                  window.location = "videos.html";
             else{
                  this.src = videos[++actual]; //Asigno al siguiente vídeo
                  this.play(); //Lo reproduzco
             }
        }, false);
     });
})();
 

Recuerda tener un elemento <video> con id reproductor en el documento. Asegúrate de que la respuesta que envíes desde funcion_array.php tenga esta forma:

Código PHP:

echo json_encode($lista_videos);
 

En donde $lista_videos es un array que contiene los nombres de los vídeos que deseas reproducir. Asegúrate también de que cada vídeo de la lista tiene la ruta correcta para que puedan ubicarse y reproducirse correctamente.

Saludos