[Resuelto] Ayuda con PHP, etiqueta <video> y accionar botones

[mascalapiz]

Hola!

Salgo de las sombras para preguntaros una duda xD

Veréis, tengo una web de contenido para adultos y muchos visitantes me han pedido algo que llevaba tiempo queriendo hacer, pero no sé como hacerlo muy bien, a ver si me podéis echar un cable.

La web está ordenada por categorías pero no subo vídeos, sino archivos webm. El caso es que nada más entrar, lo que se muestra es un vídeo webm aleatorio de todos los que hay (está puesto mediante la etiqueta <video> y con autoplay para que se inicia nada más entrar en la página) y debajo del webm hay un botón "Random" que te cambia el webm actual por otro aleatorio de la página (de cualquier categoría).

El caso es que quiero conseguir que cuando el webm termine (algunos duran X segundos, otros XX segundos y otros unos pocos minutos) se ponga en autoplay otro webm aleatorio, sin tener que darle tú manualmente al botón "Random" xD

Alguno puede darme alguna idea sobre cómo se podría hacer? Llevo poco tiempo con php y todo lo he hecho desde 0, pero esque con esto me quedo en blanco

Un saludo y gracias!

[#!drvy]

Eso tiene que ver mas bien poco con PHP. Usa el evento, onended sobre el objeto del video.

Ejemplo:

Código (javascript) [Seleccionar] Expandir

<video id='video' src='http://v2v.cc/~j/theora_testsuite/320x240.ogg' controls></video>

<script type='text/javascript'>
   var video = document.getElementById('video');
   var otraUrl = 'http://v2v.cc/~j/theora_testsuite/pixel_aspect_ratio.ogg';

   video.onended = function(){
       this.pause();
       this.src = otraUrl;
       this.play();
   };
</script>

Saludos

[mascalapiz]

Eso tiene que ver mas bien poco con PHP. Usa el evento, onended sobre el objeto del video.

Ejemplo:

Código (javascript) [Seleccionar] Expandir

<video id='video' src='http://v2v.cc/~j/theora_testsuite/320x240.ogg' controls></video>

<script type='text/javascript'>
   var video = document.getElementById('video');
   var otraUrl = 'http://v2v.cc/~j/theora_testsuite/pixel_aspect_ratio.ogg';

   video.onended = function(){
       this.pause();
       this.src = otraUrl;
       this.play();
   };
</script>

Saludos

Gracias por la respuesta, he estado probando esto que dices pero me he dado cuenta de que no me sirve xD Porque no quiero que reproduzca un video en concreto una vez termine el vídeo actual, sino que la url actual cambie (ya que es del estilo www.pagina.com/index.php?video=$random)

Y para ello tengo que conseguir que cuando haga la funcion del "onended" pulse el boton "Random". Eso se puede hacer?

Un saludo y gracias por tu ayuda!


EDIT: Vale, ya está. Al final lo he hecho con tu código, pero he cambiado la segunda URL y lo de start-pause por un simple location poniendole la url con el valor aleatorio xD

[T. Collins]

Hazlo con AJAX:

Código (javascript) [Seleccionar] Expandir


video.onended = function(){
       this.pause();
       
       var h = new XMLHttpRequest();
       h.open("GET", "/random.php", false);
       h.send(null);
       if (h.status === 200) {
             this.src = h.responseText;
       }

       this.play();
   };

Necesitas un php que se llame random.php con algo así:

Código (php) [Seleccionar] Expandir


echo $url_random_video;

Prueba ahora que antes he mandado el mensaje sin querer xd

[mascalapiz]

Hazlo con AJAX:

Código (javascript) [Seleccionar] Expandir

var h = new XMLHttpRequest();
h.open("GET", u, true);
h.onreadystatechange = function(){
if(h.readyState == 4 && h.status == 200){

Justo acabo de editar mi mensaje anterior diciendo que ya lo he conseguido xD

Pero voy a mirar lo tuyo a ver.

Queda un poco sucio como lo tengo puesto, porque se nota que se refresca la página

[#!drvy]

Queda un poco sucio como lo tengo puesto, porque se nota que se refresca la página

De hecho mejor. Imagínate que el visitante ve uno de los vídeos que le gusta y lo quiere compartir.. no sabrá cual es la url exacta del vídeo. Ademas, si lo haces con ajax también necesitaras proporcionar el titulo del vídeo y editar el DOM cada vez que cambie de vídeo.

Saludos

[mascalapiz]

Hazlo con AJAX:

Código (javascript) [Seleccionar] Expandir


video.onended = function(){
       this.pause();
       
       var h = new XMLHttpRequest();
       h.open("GET", "/random.php", false);
       h.send(null);
       if (h.status === 200) {
             this.src = h.responseText;
       }

       this.play();
   };

Necesitas un php que se llame random.php con algo así:

Código (php) [Seleccionar] Expandir


echo $url_random_video;

Prueba ahora que antes he mandado el mensaje sin querer xd

Esto lo que haría sería pillar la URL de un fichero externo? El caso es que la URL la genero en el mismo index.php, muevo ese código al fichero random.php y que la saque de ahí?

Gracias por toda la ayuda, estoy aprendiendo bastante con esto ahora xD

[T. Collins]

Puedes hacerlo también con el index.php

Código (php) [Seleccionar] Expandir

h.open("GET", "/index.php?random_url", false);

Y en el index pon algo así por ejemplo:

Código (php) [Seleccionar] Expandir

<?php
if( isset($_GET['random_url']) ){
       echo $random_url;
} else {
       //RESTO DEL INDEX
}
?>

De todas formas tiene razón #!drvy, como lo hiciste tú con el location tiene ciertas ventajas.

[mascalapiz]

Puedes hacerlo también con el index.php

Código (php) [Seleccionar] Expandir

h.open("GET", "/index.php?random_url", false);

Y en el index pon algo así por ejemplo:

Código (php) [Seleccionar] Expandir

<?php
if( isset($_GET['random_url']) ){
       echo $random_url;
} else {
       //RESTO DEL INDEX
}
?>

De todas formas tiene razón #!drvy, como lo hiciste tú con el location tiene ciertas ventajas.

Sí, lo dejaré como lo tengo de momento pero quiero aprender a hacer esto que comentas con Ajax para el futuro o por si lo utilizo en alguna cosa xD

Gracias a todos!