Cargar un video de youtube con javascript

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Cargar un video de youtube con javascript

Post by xacarana » Wed May 11, 2016 9:48 am

Primero se carga el api de javascript de youtube

Code: Select all

  
  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Luego se crea una función que inicializa el video y le asigna unas propiedades

Code: Select all

  
  //This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '100%',
      width: '100%',
      videoId: 'sDk1pTDPROI',
      playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'modestbranding':0, 'showinfo':0 },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange,
        'onError': onPlayerError
      }
    });
  }
Por último se ponen las funciones que atienden a los eventos onReady, onStateChange, onError

Code: Select all


   //The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo(); //Reproduce automaticamente el video cuando carga   
  }
 
  function onPlayerError(event){
    console.log(event.data);//Registra la información del error en caso de que se produzca alguno
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
    }
    if(event.data == YT.PlayerState.ENDED){
      //Informa que el video que se estaba reproduciendo termino de reproducirse
    }
  }
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply