1

nesecito la manera de cambiar el src de un video que no carga ya sea porque la url esta caida (en este ejemplo mal copiada para que no cargue) y automaticamente cargue otro video. nota: no estoy buscando compatibilidad con formato, solo nesecito que cambie el video si el primer src no carga eso es todo, no se muy bien, algo como:

<video id="Video" src="https://downld.blenr.org/peach/trailer/tiler_400p.ogg" autoplay="autoplay" controls="controls" ></video>

var video = document.getElementById("Video")
      if(video.currentTime == 1){
    video.pause();
    }else{
    this.setAttribute('src', 'https://download.blender.org/peach/trailer/trailer_400p.ogg').play();
    }

Sino se puede son mi ejemplo, pues recuerden que solo quiero el resultado que es el cambio. De ser posible me gustaria utilizar javascript no soy muy fanatico al jquery. Esperando pronta respuesta.

3
  • Hola te comento que eso que hiciste de colocar la respuesta en tu pregunta no es válido y por tanto revertí dicha acción; por favor ve mas abajo a la zona de respuestas y ahi coloca lo que hiciste, para que toda la comunidad nos beneficiemos de tu aporte y recibas votos positivos por ello
    – user75901
    Commented el 24 mar. 2019 a las 22:09
  • ok. muchas gracias por la coreccion. me parecio mal contestarme a mi mismo jejejee me desocupo y lo publico.
    – Manuel b
    Commented el 25 mar. 2019 a las 4:28
  • de hecho es totalmente válido y aceptado que si tu obtienes la solución a tu pregunta, la publiques la aceptes y los demás al revisarla la podamos calificar
    – user75901
    Commented el 25 mar. 2019 a las 4:29

3 respuestas 3

2

Es posible obtener el resultado que deseas de una manera mas sencilla con el uso de la etiqueta source de la siguiente forma:

<video autoplay controls>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html4.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
</video>
4
  • mmm... La anterior respuesta era la mas acertada, pero fue eliminada y no entiendo porque jejejejeje. La etiqueta source solo es util para explorar los diferentes formatos hasta encontrar el formato compatible. y no es lo que solicito. Lo siento, esta respuesta es muy lejos de ser la solucion.
    – Manuel b
    Commented el 24 mar. 2019 a las 18:52
  • en realidad la etiqueta también funciona para iterar los elementos según la disponilidad de los recursos, siendo el primero el mas deseado Commented el 24 mar. 2019 a las 18:56
  • mmm... lo se, pero la solicitud o el resultado es que cambie la url cuando no sea cargada, es decir cuando el video no esta online o haya sido eliminado por ejemplo, es una solucion muy practica que ni siquiera youtube lo tiene, solo es cambiar la url del video cuando este no este disponible, no la compatibilidad.
    – Manuel b
    Commented el 24 mar. 2019 a las 19:20
  • no se si no logro hacerme entender, pero en mi código he usado dos recursos con el mismo MIME type, sin embargo el primero no existe y el segundo si, y si ejecutas el código, el que te mostrara sera el segundo Commented el 24 mar. 2019 a las 19:30
1

De igual modo gracias por participar en busca de una solucion.

Mis conocimientos en js son basicos, pero despues de leer mucho encontre el concepto de onerror, y una vez que sabes que buscar decidir utilizar el evento onerror con el cual obtuve los resultados que esperaba, poco utilizado realmente, pero muy compatible.

Espero que tambien sea de utilidad. El codigo que utilize fue el siguiente:

var vide0 = document.getElementById("Video");
vide0.onerror = function() {
    vide0.setAttribute('src', 'https://download.blender.org/peach/trailer/trailer_400p.ogg');
    vide0.play();
};
<video id="Video" src="dfdsfdsf" width="300" height="150" controls autoplay="autoplay">
</video>

3
  • tu solución fallara en las versiones nuevas de Google Chrome en caso tal de que no haya sucedido ninguna interacción del usuario con el DOM Commented el 25 mar. 2019 a las 11:37
  • bueno, he leido todo lo que encontre y en todas las fuenes el evento onerror es compatible con todos los navegadores, aunque en IE el evento onerror aplicado a un video/audio solo lo es a partir de la version 9. Por lo demas, no creo que haya problemas con la utilizacion, pero si la hay mas adelante espero que lo notifiques o lo corrijamos para beneficio de quien lo requiera.
    – Manuel b
    Commented el 25 mar. 2019 a las 11:45
  • el onerror esta bien, el problema lo vas a tener es con el play() Commented el 25 mar. 2019 a las 13:15
1

Puedes usar promises (Código asíncrono en javascript), por ejemplo si hay un error en la carga de los datos, inmediatamente cambias el src, incluso puedes encadenar promises, pero ten cuidado de no caer en el Promises hell, ya que las promises fueron creadas precisamente para evitar el llamado callback hell.

let video = document.getElementById("Video");
const promise = new Promise((resolve,reject)=>{

    video.load();
    video.onloadeddata = ()=>{

         resolve();

    }

    //Reject solo se ejecuta si resolve fallo.
    reject('https://download.blender.org/peach/trailer/trailer_400p.ogg');

}).then(){

   video.pause();

}.catch(url){

   video.src = url;
   const anotherP = new Promise((resol, rej)=>{

      video.load();
      video.onerror = ()=>{

         rej("¡No ha sido posible cargar el video de repuesto!");      

      }

      resol();

   }).then(){

       video.pause();

   }.catch(message){

        throw new Error(message);

   }

}

Las promises se usan para ejecutar código asíncrono, es decir, cuando requieres que algo se ejecute en segundo plano y este disponible un tiempo después mientras el javascript si lo requiere ejecuta otras cosas. En nuestro caso la carga de un video.

En tu caso, ten en cuenta que el atributo autoplay, solo te va a funcionar si lo ejecuta el propio usuario mediante una función al inicio (Por ejemplo oprimir una tecla o hacer un click), con las funciones de cargar o funciones que no dependan del usuario, chrome automáticamente bloqueara este comportamiento, y no reproducirá el video. (Aunque de todas maneras tu mas adelante por ti mismo en el código lo pausas),(Si es este el problema, el hecho de que no se reproduce) intenta añadir un eventListener para poder usar la función play en el video cuando el video este cargado.

Por ejemplo un onclick.

El funcionamiento de una promise consta de tres estados, de los cuales al final la promise siempre tendra un estado u otro, estos son llamados "resuelto" y "rechazado", la promise recibe como parámetros dos callbacks, (Funciones), la primera se ejecuta cuando la operación a realizar fue exitosa, la segunda se ejecuta cuando la operación a realizar falló.

En este casó, para que no halla conflictos con la promise, le he añadido al elemento video de html un atributo: "preload = "none", ya que por defecto las imagenes, audios y videos lo tienen en auto, el problema es que si el video ya cargo por defecto nunca se va a ejecutar nuestra promise, ya que nunca entrara en la función onloadeddata del video, que se ejecuta una vez termine de cargar la data del video.

entonces:

video.load();//Cargamos el video manualmente
video.onloadeddata = ()=>{

     /*Una vez halla cargado el video se ejecuta automaticamente resolve
     resolve a su vez, llama a then, el cual siempre es ejecutado después de que
     resolve halla sido llamado, si le pasamos parametros ya sea a resolve o reject
     estos podrán ser recibidos en .then o .catch respectivamente.

     Esto dependiendo del estado de la promesa (Cumplida o rechazada)*/
     resolve();

}

Por otro lado:

.then(){

   video.pause();

}.catch(url){

  //resto del código

}

como puedes ver, atravez de nuestra función principal de nuestra promise, si nosotros nos saltamos el ; del final, podemos concatenar .then() y .catch() ahí mismo como si se tratase de la cola de una función!, esto lo hacemos con un punto "."

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.