YouTube Player API Reference for iframe Embeds

La API del reproductor IFrame permite insertar un reproductor de video de YouTube en un sitio web y controlar el reproductor con JavaScript. A diferencia de las API de Flash y JavaScript de los reproductores, en las que se inserta un objeto Flash en la página web, la API de IFrame publica contenido en una etiqueta <iframe> de la página. Este enfoque proporciona más flexibilidad que las API disponibles anteriormente, ya que permiten que YouTube se visualice en un reproductor HTML5 en lugar de un reproductor Flash en los dispositivos móviles que no son compatibles con Flash.

Mediante el uso de las funciones JavaScript de la API puedes poner videos en cola para su reproducción, reproducir, pausar o detener los videos, ajustar el volumen del reproductor o recuperar la información sobre el video en reproducción. También permiten agregar objetos de escucha de eventos que se ejecutan en respuesta a ciertos eventos del reproductor, como cambiar el estado del reproductor o cambiar la calidad de reproducción del video.

En esta guía se explica cómo utilizar la API de IFrame. En ella se identifican los diferentes tipos de eventos que la API puede enviar y se explica cómo escribir objetos de escucha de eventos para responder a esos eventos. También se detallan las diferentes funciones de JavaScript que es posible invocar para controlar el reproductor de video, así como los parámetros del reproductor que se pueden utilizar para personalizar el reproductor.

Requisitos

El usuario final debe utilizar un navegador compatible con la función postMessage de HTML5. La mayoría de los navegadores modernos son compatibles con la función postMessage, con la excepción de Internet Explorer 7.

Los reproductores insertados deben tener una ventana gráfica de al menos 200px por 200px. Si el reproductor muestra controles, debe tener el tamaño suficiente para mostrar los controles por complete, sin reducir la ventana gráfica por debajo del tamaño mínimo. Recomendamos que los reproductores de 16:9 tengan al menos 480 píxeles de ancho y 270 píxeles de alto.

Cualquier página web que utilice la API de IFrame también debe implementar la siguiente función de JavaScript:

  • onYouTubeIframeAPIReady: la API invoca esta función cuando la página termina de descargar el código JavaScript para la API del reproductor, que permite utilizar la API en la página. Por lo tanto, esta función podrá crear los objetos del reproductor que deseas mostrar cuando se cargue la página.

Introducción

La página HTML de ejemplo que se muestra a continuación crea un reproductor insertado que carga un video, lo reproduce durante seis segundos y luego detiene la reproducción. Los comentarios numerados en el código HTML se explican en la lista posterior al ejemplo.

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. 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);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

La siguiente lista ofrece más detalles sobre el ejemplo anterior:

  1. La etiqueta <div> de esta sección identifica la ubicación dentro de la página donde la API de IFrame posicionará el reproductor de video. El constructor del objeto del reproductor, descrito en la sección Cómo cargar un reproductor de video, identifica la etiqueta <div> por su id para asegurarse de que la API ubica la etiqueta <iframe> en el lugar correspondiente. Específicamente, la API de IFrame reemplaza la etiqueta <div> con la etiqueta <iframe>.

    Como alternativa, también es posible poner el elemento <iframe> directamente en la página. En la sección Cómo cargar un reproductor de video se explica cómo hacerlo.

  2. El código de esta sección carga el código JavaScript de la API del reproductor IFrame. En el ejemplo se utiliza la modificación de DOM para descargar el código de la API con el fin de comprobar que el código se recupera de forma asíncrona. (El atributo <script> de la etiqueta async, que también permite la descarga asíncrona, no es compatible con todos los navegadores modernos, como se explica en esta respuesta de Stack Overflow).

  3. La función onYouTubeIframeAPIReady se ejecuta en cuanto se descarga el código de la API del reproductor. Esta parte del código define una variable global, player, que hace referencia al reproductor de video que estás insertando. A continuación, la función construye el objeto del reproductor de video.

  4. La función onPlayerReady se ejecuta cuando se activa el evento onReady. En este ejemplo, la función indica que la reproducción debe comenzar cuando el reproductor de video está listo.

  5. La API invoca la función onPlayerStateChange cuando el estado del reproductor cambia, lo que puede indicar que el reproductor está reproduciendo un video, que está detenido, que el video terminó y así sucesivamente. La función indica que cuando el estado del reproductor es 1 (en reproducción), el reproductor debe reproducir un video durante seis segundos y luego invocar la función stopVideo para detener el video.

Cómo cargar un reproductor de video

Al finalizar la carga del código JavaScript de la API, la API invoca la función onYouTubeIframeAPIReady, momento en el cual se puede construir un objeto YT.Player para insertar un reproductor de video en tu página. El fragmento de código HTML a continuación muestra la función onYouTubeIframeAPIReady del ejemplo anterior:

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

El constructor para el reproductor de video especifica los siguientes parámetros:

  1. El primer parámetro especifica o bien el elemento DOM o el id del elemento HTML donde la API inserta la etiqueta <iframe> que contiene el reproductor.

    La API de IFrame reemplaza el elemento especificado con el elemento <iframe> que contiene el reproductor. Si el elemento que se va a sustituir tiene un estilo de visualización diferente al del elemento <iframe> insertado, es posible que afecte al diseño de tu página. De forma predeterminada, un elemento <iframe> se muestra como un elemento inline-block.

  2. El segundo parámetro es un objeto que especifica las opciones del reproductor. El objeto contiene las siguientes propiedades:
    • width (número): el ancho del reproductor de video. El valor predeterminado es 640.
    • height (número): la altura del reproductor de video. El valor predeterminado es 360.
    • videoId (cadena): la identificación de video de YouTube que identifica el video que cargará el reproductor.
    • playerVars (objeto): las propiedades del objeto identifican los parámetros de reproductor que se pueden utilizar para personalizar el reproductor.
    • events (objeto): las propiedades del objeto identifican los eventos que la API activa y las funciones (objetos de escucha de eventos) que invoca la API cuando se producen estos eventos. En el ejemplo, el constructor indica que la función onPlayerReady se ejecuta cuando se activa el evento onReady y que la función onPlayerStateChange se ejecuta cuando se activa el evento onStateChange.

Como se mencionó en la sección Introducción, en lugar de escribir un elemento <div> vacío en la página para que el código JavaScript de la API del reproductor lo reemplace por un elemento <iframe>, tú mismo puedes crear la etiqueta <iframe>.

<iframe id="player" type="text/html" width="640" height="360"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

Si optas por escribir la etiqueta <iframe>, cuando construyas el objeto YT.Player no necesitarás especificar los valores de width y height, que se especifican como atributos de la etiqueta <iframe>, ni los parámetros del reproductor o de videoId, que se especifican en la URL de src. Como medida de seguridad adicional, también deberías incluir el parámetro origin en la URL especificando el esquema de URL (http:// o https://) y el dominio completo de la página de alojamiento como valor del parámetro. Aunque origin es opcional, incluirlo sirve como protección contra software JavaScript malicioso de terceros que alguien podría insertar en tu página para asumir el control del reproductor de YouTube.

En la sección Ejemplos, encontrarás algunos ejemplos adicionales de cómo construir objetos del reproductor de video.

Operaciones

Para invocar los métodos de la API del reproductor, debes obtener una referencia al objeto del reproductor que deseas controlar. Se puede obtener la referencia mediante la creación de un objeto YT.Player, como se señala en las secciones Introducción y Cómo cargar un reproductor de video de este documento.

Funciones

Funciones de fila

Las funciones de fila permiten cargar y reproducir un video, una lista de reproducción u otra lista de videos. Si estás utilizando la sintaxis de objetos que se describe a continuación para invocar estas funciones, también puedes poner en fila o cargar una lista de resultados de búsqueda o una lista de los videos subidos de un usuario.

La API es compatible con dos sintaxis diferentes para invocar las funciones de fila.

  • La sintaxis de argumentos requiere que los argumentos de funciones se ordenen de acuerdo con un orden prescrito.

  • La sintaxis de objetos permite transferir un objeto como un parámetro único y definir las propiedades del objeto de los argumentos de la función que quieres ajustar. Además, la API puede admitir funciones adicionales que la sintaxis de argumentos no admite.

Por ejemplo, la función loadVideoById se puede invocar de cualquiera de las siguientes formas. Ten en cuenta que la sintaxis de objetos admite la propiedad endSeconds, que no es admitida por la sintaxis de argumentos.

  • Sintaxis de argumentos

    loadVideoById("bHQqvYy5KYo", 5, "large")
  • Sintaxis de objetos

    loadVideoById({'videoId': 'bHQqvYy5KYo',
                   'startSeconds': 5,
                   'endSeconds': 60,
                   'suggestedQuality': 'large'});

Funciones de fila de videos

cueVideoById
  • Sintaxis de argumentos

    player.cueVideoById(videoId:String,
                        startSeconds:Number,
                        suggestedQuality:String):Void
  • Sintaxis de objetos

    player.cueVideoById({videoId:String,
                         startSeconds:Number,
                         endSeconds:Number,
                         suggestedQuality:String}):Void

Esta función carga la miniatura del video indicado y prepara el reproductor para reproducir el video. El reproductor no solicita el archivo FLV hasta que se invoca playVideo() o seekTo().

  • El parámetro obligatorio videoId indica el ID de video de YouTube del video que se va a reproducir. En los feeds de video de la API de datos de YouTube, la etiqueta <yt:videoid> indica el ID.
  • El parámetro opcional startSeconds acepta un número decimal o entero e indica el momento desde el que debería empezar a reproducirse el video cuando se invoca playVideo(). Si se indica un valor para startSeconds y, a continuación, se ejecuta seekTo(), el reproductor inicia la reproducción desde el punto indicado en la invocación seekTo(). Cuando el video está en fila y listo para reproducirse, el reproductor emite un evento video cued (5).
  • El parámetro opcional endSeconds, que solo se admite en la sintaxis de objetos, acepta un número decimal o entero e indica el momento en que el video debe dejar de reproducirse cuando se invoca playVideo(). Si se indica un valor endSeconds y luego se invoca endSeconds, el valor seekTo() deja de estar en vigencia.
  • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

loadVideoById

  • Argument syntax

    player.loadVideoById(videoId:String,
                         startSeconds:Number,
                         suggestedQuality:String):Void
  • Object syntax

    player.loadVideoById({videoId:String,
                          startSeconds:Number,
                          endSeconds:Number,
                          suggestedQuality:String}):Void

Esta función carga y reproduce el video indicado.

  • El parámetro obligatorio videoId indica el ID de video de YouTube del video que se va a reproducir. En los feeds de video de la API de datos de YouTube, la etiqueta <yt:videoid> indica el ID.
  • El parámetro opcional startSeconds acepta un número decimal o entero. Si se indica, el video empieza a reproducirse desde el fotograma clave más cercano al momento indicado.
  • El parámetro opcional endSeconds acepta un número decimal o entero. Si se indica, el video deja de reproducirse desde el momento indicado.
  • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

cueVideoByUrl

  • Argument syntax

    player.cueVideoByUrl(mediaContentUrl:String,
                         startSeconds:Number,
                         suggestedQuality:String):Void
  • Object syntax

    player.cueVideoByUrl({mediaContentUrl:String,
                          startSeconds:Number,
                          endSeconds:Number,
                          suggestedQuality:String}):Void

Esta función carga la miniatura del video indicado y prepara el reproductor para reproducir el video. El reproductor no solicita el archivo FLV hasta que se invoca playVideo() o seekTo().

  • El parámetro obligatorio mediaContentUrl indica una URL de reproductor de YouTube completa en el formato http://www.youtube.com/v/VIDEO_ID?version=3. En los feeds de video del API de datos de YouTube, el atributo url de la etiqueta <media:content> contiene una URL de reproductor completa cuando el atributo format de la etiqueta tiene un valor de 5.
  • El parámetro opcional startSeconds acepta un número decimal o entero e indica el momento desde el cual debe empezar a reproducirse el video cuando se invoca playVideo(). Si se indica startSeconds y, a continuación, se invoca seekTo(), el reproductor iniciará la reproducción desde el momento indicado en la invocación de seekTo(). Cuando el video está en fila y listo para reproducirse, el reproductor transmite un evento video cued (5).
  • El parámetro opcional endSeconds, que solo se admite en la sintaxis de objetos, acepta un número decimal o entero e indica el momento en que el video debe dejar de reproducirse cuando se invoca playVideo(). Si se indica un valor endSeconds y luego se invoca endSeconds, el valor seekTo() deja de estar en vigencia.
  • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

loadVideoByUrl

  • Argument syntax

    player.loadVideoByUrl(mediaContentUrl:String,
                          startSeconds:Number,
                          suggestedQuality:String):Void
  • Object syntax

    player.loadVideoByUrl({mediaContentUrl:String,
                           startSeconds:Number,
                           endSeconds:Number,
                           suggestedQuality:String}):Void

Esta función carga y reproduce el video indicado.

  • El parámetro obligatorio mediaContentUrl indica una URL de reproductor de YouTube completa en el formato http://www.youtube.com/v/VIDEO_ID?version=3. En los feeds de video de la API de datos de YouTube, el atributo url de la etiqueta<media:content> contiene una URL de reproductor completa cuando el atributo format de la etiqueta tiene un valor de 5.
  • El parámetro opcional startSeconds acepta un número decimal o entero e indica el momento desde el que debería detenerse la reproducción del video. Si se indica startSeconds (puede ser un número decimal), el video comienza desde el fotograma clave más cercano al momento indicado.
  • El parámetro opcional endSeconds, que solo se admite en la sintaxis de objetos, acepta un número decimal o entero e indica el momento en que el video debe dejar de reproducirse.
  • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

Funciones de fila de listas

Las funciones cuePlaylist y loadPlaylist permiten cargar y reproducir una lista de reproducción o una lista de videos. Si estás utilizando la sintaxis de objetos para invocar estas funciones, también puedes poner en fila o cargar una lista de resultados de búsqueda o una lista de los videos subidos de un usuario.

Las funciones son diferentes en función de si se las invoca utilizando la sintaxis de argumentos o la sintaxis de objetos. En vista de aquello, ambos métodos para invocarlas se documentan a continuación.

cuePlaylist
  • Argument syntax

    player.cuePlaylist(playlist:String|Array,
                       index:Number,
                       startSeconds:Number,
                       suggestedQuality:String):Void
    Pone la lista de reproducción indicada en fila. Cuando la lista de reproducción está en fila y lista para reproducirse, el reproductor transmite un evento video cued (5).
    • El parámetro obligatorio playlist indica un ID de lista de reproducción de YouTube o una selección de ID de video de YouTube. En los feeds de video de la API de datos de YouTube, la etiqueta <yt:videoid> indica el ID.

    • El parámetro opcional index indica el índice del primer video de la lista de reproducción que se va a reproducir. El parámetro utiliza un índice basado en cero y el valor predeterminado del parámetro es 0, por lo que el comportamiento predeterminado es cargar y reproducir el primer video de la lista de reproducción.

    • El parámetro opcional startSeconds acepta un número decimal o entero e indica el tiempo desde el que el primer video de la lista de reproducción debe comenzar a reproducirse cuando se invoca la función playVideo(). Si se indica un valor para startSeconds y, a continuación, se ejecuta seekTo(), el reproductor inicia la reproducción desde el punto indicado en la invocación seekTo(). Si se pone una lista de reproducción en fila y luego se invoca la función playVideoAt(), el reproductor comienza la reproducción al inicio del video indicado.

    • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

  • Sintaxis de objetos

    player.cuePlaylist({listType:String,
                        list:String,
                        index:Number,
                        startSeconds:Number,
                        suggestedQuality:String}):Void
    Pone en fila la lista de videos indicada. La lista puede ser una lista de reproducción, feeds de resultados de búsqueda, o un feed de videos subidos de un usuario. Cuando el video está en fila y listo para reproducirse, el reproductor transmite un evento video cued (5).
    • La propiedad opcional listType indica el tipo de feed de resultados que se va a recuperar. Los valores válidos son playlist, search y user_uploads. El valor predeterminado es playlist.

    • La propiedad obligatoria list contiene una clave que identifica la lista de videos específicos que YouTube debe mostrar.

      • Si el valor de la propiedad listType es playlist, entonces la propiedad list especifica el ID de la lista de reproducción o una selección de ID de video. En los feeds de la API de datos de YouTube, la etiqueta <yt:playlistid> indica un ID de lista de reproducción y la etiqueta <yt:videoid> indica un ID de video.
      • Si el valor listType de la propiedad es search, la propiedad list indica la consulta de búsqueda.
      • Si el valor de la propiedad listType es , la propiedad list identifica al usuario de quien se muestran sus videos subidos.

    • La propiedad opcional index indica el índice del primer video de la lista que se va a reproducir. El parámetro utiliza un índice basado en cero y el valor predeterminado del parámetro es 0, por lo que el comportamiento predeterminado es cargar y reproducir el primer video de la lista.

    • La propiedad opcional startSeconds acepta un número decimal o entero e indica el tiempo desde el que el primer video de la lista debe empezar a reproducirse cuando se invoca la función playVideo(). Si se indica un valor para startSeconds y, a continuación, se ejecuta seekTo(), el reproductor inicia la reproducción desde el punto indicado en la invocación seekTo(). Si se pone en fila una lista y luego se invoca la función playVideoAt(), el reproductor comenzará a reproducir el inicio del video indicado.

    • La propiedad opcional suggestedQuality indica la calidad de reproducción sugerida para los videos de la lista. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

loadPlaylist
  • Argument syntax

    player.loadPlaylist(playlist:String|Array,
                        index:Number,
                        startSeconds:Number,
                        suggestedQuality:String):Void
    Esta función carga la lista de reproducción indicada y la reproduce.
    • El parámetro obligatorio playlist indica un ID de lista de reproducción de YouTube o una selección de ID de video de YouTube. En los feeds de video de la API de datos de YouTube, la etiqueta <yt:videoid> indica el ID.

    • El parámetro opcional index indica el índice del primer video de la lista de reproducción que se va a reproducir. El parámetro utiliza un índice basado en cero y el valor predeterminado del parámetro es 0, por lo que el comportamiento predeterminado es cargar y reproducir el primer video de la lista de reproducción.

    • El parámetro opcional startSeconds acepta un número decimal o entero e indica el momento desde el que debería comenzar la reproducción del primer video de la lista de reproducción.

    • El parámetro opcional suggestedQuality indica la calidad de reproducción sugerida del video. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

  • Object syntax

    player.loadPlaylist({list:String,
                         listType:String,
                         index:Number,
                         startSeconds:Number,
                         suggestedQuality:String}):Void
    Esta función carga la lista de reproducción indicada y la reproduce. La lista puede ser una lista de reproducción, feeds de resultados de búsqueda, o un feed de videos subidos de un usuario.
    • La propiedad opcional listType indica el tipo de feed de resultados que se va a recuperar. Los valores válidos son playlist, search y user_uploads. El valor predeterminado es playlist.

    • La propiedad obligatoria list contiene una clave que identifica la lista de videos específicos que YouTube debe mostrar.

      • Si el valor de la propiedad listType es playlist, la propiedad list indica el ID de la lista de reproducción o una selección de ID de video. En los feeds de la API de datos de YouTube, la etiqueta <yt:playlistid> indica un ID de la lista de reproducción y la etiqueta <yt:videoid> indica un ID de video.
      • Si el valor listType de la propiedad es search, la propiedad list indica la consulta de búsqueda.
      • Si el valor de la propiedad listType es user_uploads, la propiedad list identifica al usuario de quien se muestran sus videos subidos.

    • La propiedad opcional index indica el índice del primer video de la lista que se va a reproducir. El parámetro utiliza un índice basado en cero y el valor predeterminado del parámetro es 0, por lo que el comportamiento predeterminado es cargar y reproducir el primer video de la lista.

    • La propiedad opcional startSeconds acepta un número decimal o entero e indica el momento desde el que debería comenzar la reproducción del primer video de la lista.

    • La propiedad opcional suggestedQuality indica la calidad de reproducción sugerida para los videos de la lista. Para obtener más información sobre la calidad de reproducción, consulta la definición de la función setPlaybackQuality.

Controles de reproducción y configuración del reproductor

Reproducción de un video

player.playVideo():Void
Reproduce el video que se encuentra actualmente cargado o en fila. El estado final del reproductor después de que se ejecuta esta función es playing (1).

Nota: Una reproducción se incluye en el conteo de vistas oficial de un video si se inicia a través de un botón de reproducción nativo del reproductor.
player.pauseVideo():Void
Pausa el video que se está reproduciendo actualmente. El estado final después de que se ejecuta esta función es paused (2) a menos que el reproductor se encuentre en el estado ended (0) cuando se invoca la función, en cuyo caso el estado del reproductor no cambia.
player.stopVideo():Void
Detiene y cancela la carga del video actual. Esta función debe reservarse para situaciones excepcionales cuando se sabe que el usuario no va a mirar videos adicionales en el reproductor. Si se pretende pausar el video, solo se debe invocar la función pauseVideo. Si deseas cambiar el video en reproducción, puedes invocar una de las funciones de fila sin invocar primero stopVideo.

Importante: A diferencia de la función pauseVideo, que deja el reproductor en el estado paused (2), la función stopVideo podría poner el reproductor en cualquier estado de reproducción detenida, como ended (0), paused (2), video cued (5) o unstarted (-1).
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
Busca un tiempo indicado en el video. Si el reproductor está en pausa cuando se invoca la función, se mantendrá en pausa. Si la función se invoca desde otro estado (playing, video cued, etc.), el reproductor reproducirá el video.
  • El parámetro seconds identifica el momento en que el reproductor debe avanzar.

    El reproductor avanza al fotograma clave más cercano antes de ese tiempo a menos que el reproductor ya haya descargado la parte del video que el usuario está buscando. En ese caso, el reproductor avanza al fotograma clave más cercano antes o después del tiempo indicado según lo dictado por el método seek() del objeto NetStream del reproductor Flash. (Consulta la documentación de Adobe para obtener más información).

  • El parámetro allowSeekAhead determina si el reproductor realiza una nueva solicitud al servidor cuando el parámetro seconds indica un momento que no pertenezca a los datos de video actualmente en búfer.

    Te recomendamos que establezcas este parámetro en false cuando el usuario arrastra el mouse a lo largo de una barra de progreso de video y luego en true cuando el usuario suelta el mouse. Este método permite al usuario desplazarse por distintos puntos del video que no se han almacenado en el búfer sin solicitar nuevas secuencias de video. Cuando el usuario suelta el botón del mouse, el reproductor avanza hasta el punto deseado en el video y solicita una nueva secuencia de video si es necesario.

player.clearVideo():Void
Borra la visualización de video. Esta función es útil si deseas borrar el resto del video después de invocar stopVideo(). Ten en cuenta que esta función ya no está disponible en la API del reproductor ActionScript 3.0.

Reproducción de un video en una lista de reproducción

player.nextVideo():Void
Esta función carga y reproduce el siguiente video de la lista de reproducción.
  • Si se invoca player.nextVideo() mientras se reproduce el último video de la lista de reproducción y la lista de reproducción está configurada para reproducir continuamente (loop), el reproductor carga y reproduce el primer video de la lista.

  • Si se invoca player.nextVideo() mientras se reproduce el último video de la lista de reproducción y la lista de reproducción no está configurada para reproducir continuamente, la reproducción termina.

player.previousVideo():Void
Esta función carga y reproduce el video anterior de la lista de reproducción.
  • Si se invoca player.previousVideo() mientras se reproduce el primer video de la lista de reproducción y la lista de reproducción está configurada para reproducir continuamente (loop), el reproductor carga y reproduce el último video de la lista.

  • Si se invoca player.previousVideo() mientras se reproduce el primer video de la lista de reproducción y la lista de reproducción no está configurada para reproducir continuamente, el reproductor reinicia el primer video de la lista de reproducción desde el principio.

player.playVideoAt(index:Number):Void
Esta función carga y reproduce el video indicado en la lista de reproducción.
  • El parámetro obligatorio index indica el índice del video que se desea reproducir en la lista de reproducción. El parámetro utiliza un índice basado en cero, por lo que el valor 0 se utiliza para identificar el primer video de la lista. Si se selecciona la reproducción aleatoria de la lista de reproducción, esta función reproduce el video en la posición indicada en la lista de reproducción reproducida aleatoriamente.

Modificación del volumen del reproductor

player.mute():Void
Silencia el reproductor.
player.unMute():Void
Activa el sonido del reproductor.
player.isMuted():Boolean
Muestra el valor true si el sonido del reproductor está desactivado y false si está activado.
player.setVolume(volume:Number):Void
Establece el volumen. Acepta un número entero comprendido entre 0 y 100.
player.getVolume():Number
Muestra el volumen actual del reproductor. Este puede ser un número entero comprendido entre 0 y 100. Ten en cuenta que getVolume() muestra el volumen aunque el reproductor esté silenciado.

Configuración del tamaño del reproductor

player.setSize(width:Number, height:Number):Object
Establece el tamaño en píxeles del <iframe> que contiene el reproductor.

Ajuste de la velocidad de reproducción

player.getPlaybackRate():Number
Esta función recupera la velocidad de reproducción del video en reproducción. La velocidad de reproducción predeterminada es 1, lo que indica que el video se reproduce a velocidad normal. Las velocidades de reproducción pueden expresarse en valores como 0.25, 0.5, 1, 1.5 y 2.
player.setPlaybackRate(suggestedRate:Number):Void
Esta función ajusta la velocidad de reproducción sugerida para el video actual. Si la velocidad de reproducción cambia, solo afecta al video actualmente en fila o en reproducción. Si se ajusta la velocidad de reproducción de un video en fila, esa velocidad sigue en vigencia cuando se invoca la función playVideo o cuando el usuario inicia la reproducción directamente a través de los controles del reproductor. Además, invocar funciones para poner en fila o cargar videos o listas de reproducción (cueVideoById, loadVideoById, etc.) restablece la velocidad de reproducción en 1.

Al ejecutar esta función no se garantiza que la calidad de reproducción cambie efectivamente. Sin embargo, si la velocidad de reproducción cambia, se activa el evento onPlaybackRateChange. Ten en cuenta que tu código debe responder al evento y no al hecho de haber invocado la función setPlaybackRate.

El método getAvailablePlaybackRates muestra las velocidades de reproducción disponibles para el video en reproducción. Sin embargo, si se establece el parámetro suggestedRate en un valor decimal o entero no admitido, el reproductor redondea ese valor hasta el valor admitido más cercano a 1.
player.getAvailablePlaybackRates():Array
Esta función muestra el conjunto de velocidades de reproducción en las que está disponible el video actual. El valor predeterminado es 1 , lo que indica que el video se está reproduciendo a velocidad normal.

La función muestra una selección de números ordenados según la velocidad de reproducción; esto es, de la velocidad más baja a la más alta. La selección siempre debe contener al menos un valor (1), incluso si el reproductor no admite velocidades variables de reproducción.

Configuración de la reproducción de listas de reproducción

player.setLoop(loopPlaylists:Boolean):Void

Esta función indica si el reproductor de video debe reproducir continuamente una lista de reproducción o si debe detener la reproducción al finalizar el último video de la lista de reproducción. El comportamiento predeterminado es que las listas de reproducción no se reproduzcan en bucle.

Esta configuración se mantiene incluso si se carga o pone en fila una lista de reproducción distinta, lo que significa que si se carga una lista de reproducción, se invoca la función setLoop con un valor true y, a continuación, se carga una segunda lista de reproducción, la segunda lista también se reproduce en bucle.

El parámetro necesario loopPlaylists identifica el comportamiento de bucle.

  • Si el valor del parámetro es true, el reproductor de video reproduce listas de reproducción de forma continua. Después de reproducir el último video de una lista de reproducción, el reproductor de video vuelve al principio de la lista de reproducción y la reproduce nuevamente.

  • Si el valor del parámetro es false, las reproducciones se terminan después de que el reproductor de video reproduce el último video de una lista de reproducción.

player.setShuffle(shufflePlaylist:Boolean):Void

Esta función indica si los videos de una lista de reproducción deben mezclarse para que se reproduzcan en un orden distinto del designado por el autor de la lista de reproducción. Si se mezcla una lista de reproducción después de comenzar a reproducirla, la lista se reordena mientras se reproduce el video actual. El siguiente video para reproducir se selecciona según el nuevo orden de la lista.

Esta configuración no se mantiene si se carga o se pone en fila una lista de reproducción diferente, lo que significa que si se carga una lista de reproducción, se invoca la función setShuffle y, a continuación, se carga una segunda lista de reproducción, la segunda lista de reproducción no se mezcla.

El parámetro necesario shufflePlaylist indica si YouTube debe mezclar la lista de reproducción.

  • Si el valor del parámetro es true, YouTube mezcla el orden de la lista de reproducción. Si se indica a la función que mezcle una lista de reproducción ya mezclada, YouTube mezcla el orden nuevamente.

  • Si el valor del parámetro es false, YouTube restablece el orden de reproducción original.

Estado de la reproducción

player.getVideoLoadedFraction():Float
Muestra un número entre 0 y 1 que indica el porcentaje del video que el reproductor muestra en el búfer. Este método muestra un número más confiable que los métodos getVideoBytesLoaded y getVideoBytesTotal.
player.getPlayerState():Number
Muestra el estado del reproductor. Los valores posibles son:
  • -1 - unstarted (sin empezar)
  • 0 - ended (terminado)
  • 1 - playing (en reproducción)
  • 2 - paused (en pausa)
  • 3 - buffering (almacenando en búfer)
  • 5 - video cued (video en fila)
player.getCurrentTime():Number
Muestra el tiempo transcurrido en segundos desde que se inició la reproducción del video.
player.getVideoStartBytes():Number
Obsoleto desde el 31 de octubre de 2012. Muestra el número de bytes desde el cual el archivo de video comenzó a cargar. (Actualmente, este método siempre muestra un valor de 0). Caso de ejemplo: el usuario busca un punto que aún no se ha cargado, y el reproductor realiza una nueva solicitud de reproducción de un segmento del video que aún no se ha cargado.
player.getVideoBytesLoaded():Number
Obsoleto a partir del 18 de julio de 2012. En su lugar, utiliza el método getVideoLoadedFraction para determinar el porcentaje de video almacenado en el búfer.

Este método muestra un valor entre 0 y 1000 que se aproxima a la cantidad de video cargado. Es posible calcular la fracción del video cargado dividiendo el valor getVideoBytesLoaded por el valor getVideoBytesTotal.
player.getVideoBytesTotal():Number
Obsoleto a partir del 18 de julio de 2012. En su lugar, utiliza el método getVideoLoadedFraction para determinar el porcentaje de video almacenado en el búfer.

Muestra el tamaño en bytes del video actualmente cargado o en reproducción o una aproximación del tamaño del video.

Este método siempre muestra un valor de 1000. Es posible calcular la fracción del video cargado dividiendo el valor getVideoBytesLoaded por el valor getVideoBytesTotal.

Calidad de reproducción

player.getPlaybackQuality():String
Esta función recupera la calidad de video real del video actual. Los valores devueltos posibles son highres, hd1080, hd720, large, medium y small . También puede mostrar undefined si no hay un video actualmente.
player.setPlaybackQuality(suggestedQuality:String):Void
Esta función establece la calidad de video sugerida para el video actual. La función permite que el video se vuelva a cargar en su posición actual con la nueva calidad. Si se modifica la calidad de reproducción, esta solo cambia para el video que se esta reproduciendo. Al ejecutar esta función no se garantiza que la calidad de reproducción vaya a cambiar realmente. Sin embargo, si la calidad de reproducción cambia, se activa el evento onPlaybackQualityChange y el código debe responder al evento y no al hecho de que se invocó a la función setPlaybackQuality.

El valor del parámetro puede ser small, medium, large, hd720, hd1080, highres o default. Se recomienda establecer el valor de parámetro como default; de este modo, YouTube selecciona la calidad de reproducción más apropiada, que puede variar en función del usuario, del video, del sistema y de otras condiciones de reproducción.

Cuando se sugiere una calidad de reproducción para un video, la calidad sugerida solo afecta a ese video. Debes seleccionar una calidad de reproducción que sea equivalente al tamaño del reproductor de video. Por ejemplo, si el reproductor de video de tu página es de 1280 px por 720 px, una calidad de video hd720 se verá mejor que una calidad de video hd1080. Se recomienda invocar la función getAvailableQualityLevels() para determinar los niveles de calidad disponibles para un video.

La siguiente lista muestra los niveles de calidad de reproducción equivalentes a los diferentes tamaños de reproductores estándar. Te recomendamos que ajustes la altura del reproductor de video a uno de los valores señalados a continuación y que el tamaño del reproductor utilice una relación de aspecto de 16:9. Como se dijo anteriormente, incluso si eliges un tamaño estándar de reproductor, se recomienda establecer el valor de parámetro suggestedQuality en default para que YouTube seleccione la calidad de reproducción más adecuada.

  • Nivel de calidad small: la altura del reproductor es de 240 px y las dimensiones del reproductor son de al menos 320 px por 240 px para la relación de aspecto 4:3.
  • Nivel de calidad medium: la altura del reproductor es de 360 px y las dimensiones del reproductor son de 640 px por 360 px (para la relación de aspecto 16:9), o de 480 px por 360 px (para la relación de aspecto 4:3).
  • Nivel de calidad large: la altura del reproductor es de 480 px y las dimensiones del reproductor son de 853 px por 480 px (para la relación de aspecto 16:9), o de 640 px por 480 px (para la relación de aspecto 4:3).
  • Nivel de calidad hd720: la altura del reproductor es de 720 px y las dimensiones del reproductor son de 1280 px por 720 px (para la relación de aspecto 16:9), o de 960 px por 720 px (para la relación de aspecto 4:3).
  • Nivel de calidad hd1080: la altura del reproductor es de 1080 px y las dimensiones del reproductor son de 1920 px por 1080 px (para la relación de aspecto 16:9), o de 1440 px por 1080 px (para la relación de aspecto 4:3).
  • Nivel de calidad highres: la altura del reproductor es superior a 1080 px, lo que significa que la relación de aspecto del reproductor es superior a 1920 px por 1080 px.
  • Nivel de calidad default: YouTube selecciona la calidad de reproducción apropiada. Este valor revierte el nivel de calidad al estado predeterminado y anula todos los intentos anteriores de ajustar la calidad de reproducción mediante las funciones cueVideoById, loadVideoById o setPlaybackQuality.

Si invocas la función setPlaybackQuality con un nivel de calidad sugerida (suggestedQuality) que no está disponible para el video, la calidad se ajusta al siguiente nivel más bajo que esté disponible. Por ejemplo, si solicitas un nivel de calidad large, pero el nivel no está disponible, la calidad de reproducción se ajustará a medium (siempre y cuando el nivel de calidad esté disponible).

Asimismo, establecer suggestedQuality en un valor que no es un nivel de calidad reconocido equivale a establecer suggestedQuality en default .
player.getAvailableQualityLevels():Array
Esta función muestra el conjunto de formatos de calidad en los que está disponible el video actual. Puedes utilizar esta función para determinar si el video está disponible en una calidad superior a la que está viendo el usuario. De esta forma, tu reproductor puede mostrar un botón u otro elemento que permita al usuario ajustar la calidad.

La función muestra una selección de cadenas ordenadas de mayor a menor calidad. Los valores de elemento posibles de la selección son highres, hd1080, hd720, large, medium y small. Si no hay ningún video en ese momento, esta función muestra un conjunto vacío.

Tu cliente no debe optar de forma automática por utilizar el video de mayor calidad o de menor calidad o cambiar a cualquier nombre de formato desconocido. YouTube podría ampliar la lista de niveles de calidad e incluir formatos que puede que no sean adecuados en el contexto de tu reproductor. Del mismo modo, YouTube podría eliminar opciones de calidad, lo que sería perjudicial para la experiencia del usuario. Al garantizar que tu cliente solo opta por utilizar formatos conocidos y disponibles, puedes estar seguro de que el rendimiento del cliente no se verá afectado ni por la introducción de nuevos niveles de calidad ni por la eliminación de los niveles de calidad que no son adecuados en el contexto de tu reproductor.

Recuperación de información de video

player.getDuration():Number
Muestra la duración en segundos del video que se está reproduciendo actualmente. Ten en cuenta que getDuration() muestra 0 hasta que se hayan cargado los metadatos del video, lo que normalmente se produce justo después de que comience la reproducción del video.

Si el video que se está reproduciendo es un evento en vivo, la función getDuration() muestra el tiempo transcurrido desde el inicio de la transmisión de video por Internet. Específicamente, esta es la cantidad de tiempo que el video se transmite sin ser reiniciado o interrumpido. Además, esta duración por lo general es más larga que el tiempo real del evento debido a que la transmisión puede comenzar antes de la hora de inicio del evento.
player.getVideoUrl():String
Muestra la URL de YouTube.com del video actualmente cargado o en reproducción.
player.getVideoEmbedCode():String
Muestra el código insertado del video actualmente cargado o en reproducción.

Recuperación de información de una lista de reproducción

player.getPlaylist():Array
Esta función muestra una selección de los ID de video de la lista de reproducción en su orden actual. De forma predeterminada, esta función muestra ID de video en el orden designado por el propietario de la lista de reproducción. Sin embargo, si invocaste a la función setShuffle para mezclar el orden de la lista de reproducción, el valor de retorno de la función getPlaylist() refleja el orden mezclado.
player.getPlaylistIndex():Number
Esta función muestra el índice del video de la lista de reproducción que se está reproduciendo.
  • Si no mezclaste la lista de reproducción, el valor mostrado identifica la posición en la que el creador de la lista de reproducción puso el video. El valor mostrado utiliza un índice basado en cero, por lo que un valor de 0 identifica el primer video de la lista de reproducción.

  • Si mezclaste la lista de reproducción, el valor mostrado identifica el orden del video en la lista de reproducción mezclada.

Adición o eliminación de un objeto de escucha de eventos

player.addEventListener(event:String, listener:String):Void
Agrega una función de escucha para el event especificado. En la sección Eventos a continuación se identifican los diferentes eventos que puede activar el reproductor. El detector es una cadena que indica la función que se ejecuta cuando se activa el evento indicado.
player.removeEventListener(event:String, listener:String):Void
Elimina una función de escucha para el event especificado. El valor listener es una secuencia que identifica la función que no se ejecuta cuando se activa el evento especificado.

Acceso y modificación de los nodos DOM

player.getIframe():Object
Este método muestra el nodo DOM para el <iframe> incrustado.
player.destroy():Void
Elimina el <iframe> que contiene el reproductor.

Eventos

La API ejecuta eventos para notificar a la aplicación de los cambios en el reproductor insertado. Como se señaló en la sección anterior, puedes suscribirte a eventos agregando un objeto de escucha de eventos cuando se construye el objeto YT.Player. También puedes utilizar la función addEventListener.

La API transfiere un objeto de evento como el único argumento para cada una de esas funciones. El objeto de evento tiene las siguientes propiedades:

  • La propiedad target del evento identifica el reproductor de video que corresponde al evento.
  • La propiedad data del evento indica un valor relevante para el evento. Ten en cuenta que el evento onReady no especifica una propiedad data.

La siguiente lista define los eventos que activa la API:

onReady
Este evento se activa cuando finaliza la carga de un reproductor y está listo para recibir invocaciones de la API. Debes implementar esta función en tu aplicación si quieres que ejecute ciertas operaciones de forma automática tan pronto como el reproductor esté listo, como reproducir el video o mostrar información del video.

El ejemplo a continuación muestra una función de ejemplo para controlar este evento. El objeto de evento que la API transfiere a la función tiene una propiedad target, que identifica el reproductor. La función recupera el código insertado del video cargado actualmente, inicia la reproducción del video y muestra el código insertado en el elemento de página cuyo valor id es embed-code.
function onPlayerReady(event) {
  var embedCode = event.target.getVideoEmbedCode();
  event.target.playVideo();
  if (document.getElementById('embed-code')) {
    document.getElementById('embed-code').innerHTML = embedCode;
  }
}
onStateChange
Este evento se activa cada vez que cambia el estado del reproductor. La propiedad data del objeto de evento que la API transfiere a tu función de objeto de escucha de eventos especifica un número entero que corresponde al nuevo estado del reproductor. Los valores posibles son:

  • -1 (unstarted, sin empezar)
  • 0 (ended, finalizado)
  • 1 (playing, en reproducción)
  • 2 (paused, en pausa)
  • 3 (almacenando en búfer)
  • 5 (video cued, video en cola)

Cuando el reproductor comienza a cargar un video, transmite un evento unstarted (-1). Cuando un video está en cola y listo para reproducirse, el reproductor transmite un evento video cued (5). Puedes especificar los valores en tu código o usar una de las siguientes variables separadas por nombre:

  • YT.PlayerState.ENDED
  • YT.PlayerState.PLAYING
  • YT.PlayerState.PAUSED
  • YT.PlayerState.BUFFERING
  • YT.PlayerState.CUED

onPlaybackQualityChange
Este evento se activa cada vez que cambia la calidad de reproducción del video. Por ejemplo, si se invoca la función setPlaybackQuality(suggestedQuality), el evento se activará si la calidad de reproducción realmente cambia. Tu aplicación debería responder al evento y no debería suponer que la calidad cambiará automáticamente cuando se invoque la función setPlaybackQuality(suggestedQuality). Del mismo modo, tu código no debe suponer que la calidad de reproducción solo cambia al invocar explícitamente setPlaybackQuality o cualquier otra función que permita definir una calidad de reproducción sugerida.

El valor de la propiedad data del objeto del evento que la API transfiere a la función de objeto de escucha de eventos es una cadena que identifica la nueva calidad de reproducción. Los valores posibles son:

  • small
  • medium
  • large
  • hd720
  • hd1080
  • highres

onPlaybackRateChange
Este evento se activa cada vez que cambia la calidad de reproducción del video. Por ejemplo, si se invoca la función setPlaybackRate(suggestedRate), el evento se activa si la velocidad de reproducción cambia. La aplicación debería responder al evento y no debería suponer que la velocidad de reproducción cambiará automáticamente cuando se invoca la función setPlaybackRate(suggestedRate). De modo similar, el código no debería suponer que la velocidad de reproducción del video cambia como consecuencia de una invocación explícita de setPlaybackRate.

El valor de la propiedad data del objeto del evento que la API traspasa a la función de objeto de escucha de eventos es un número que identifica la nueva velocidad de reproducción. El método getAvailablePlaybackRates muestra una lista de las velocidades de reproducción válidas del video en fila o en reproducción actual.
onError
Este evento se activa si se produce un error del reproductor. La API transfiere un objeto event a la función de objeto de escucha de eventos. La propiedad data del objeto especifica un número entero que identifica el tipo de error que se produjo. Los valores posibles son:

  • 2: la solicitud contiene un valor de parámetro no válido. Por ejemplo, este error se produce cuando se especifica un ID de video que no contiene 11 caracteres, o que contiene caracteres no válidos, como signos de exclamación o asteriscos.
  • 5: el contenido solicitado no se puede reproducir en un reproductor HTML5, o se produjo otro error relacionado con el reproductor HTML5.
  • 100: no se encontró el video solicitado. Esto sucede si se eliminó un video (por cualquier motivo) o si se marcó como privado.
  • 101: el propietario del video solicitado no permite su reproducción en reproductores insertados.
  • 150: este error y el error 101 son idénticos. No es más que un error 101 disfrazado.

onApiChange
Este evento se activa para indicar que el reproductor cargó (o descargó) un módulo con métodos API expuestos. Tu aplicación puede intentar escuchar este evento y sondear el reproductor para determinar las opciones expuestas del módulo cargado recientemente. A continuación, tu aplicación puede recuperar o actualizar la configuración actual de esas opciones.

El siguiente comando recupera una selección de nombres de módulo para la cual se pueden establecer opciones del reproductor:
player.getOptions();
Actualmente, el único módulo para el cual se pueden establecer opciones es el módulo cc, que controla los subtítulos opcionales en el reproductor. Cuando se recibe un evento onApiChange, tu aplicación puede usar el siguiente comando para determinar las opciones que se pueden establecer para el módulo cc:
player.getOptions('cc');
Al sondear el reproductor con este comando es posible confirmar la accesibilidad de las opciones a las que se quiere acceder. Los siguientes comandos recuperan y actualizan las opciones del módulo:
Cómo recuperar una opción:
player.getOption(module, option);

Cómo configurar una opción
player.setOption(module, option, value);
En la siguiente tabla se muestran las opciones compatibles con la API:

Módulo Opción Descripción
cc fontSize Esta opción ajusta el tamaño de letra de los subtítulos que se muestran en el reproductor.

Los valores válidos son -1, 0, 1, 2 y 3. El tamaño predeterminado es 0 y el tamaño mínimo es -1. Establecer esta opción en un número entero menor que -1 permite mostrar el tamaño más pequeño de subtítulos. Del mismo modo, establecer esta opción en un número mayor que 3 permite mostrar el tamaño más grande de subtítulos.
cc reload Esta opción vuelve a cargar los datos de subtítulos del video en reproducción. Si se recupera el valor de la opción, el valor es null. Establece el valor en true para recuperar los datos de subtítulos opcionales.

Consideraciones para dispositivos móviles

Reproducción automática y reproducción generada por secuencias de comandos

En algunos navegadores móviles (como Chrome y Safari), el elemento <video> de HTML5 solo permite la reproducción si esta se inicia mediante una interacción del usuario (por ejemplo, al tocar en el reproductor). A continuación se incluye un extracto de la documentación de Apple:

"Advertencia: Para evitar descargas no solicitadas a través de redes de telefonía celular por cuenta del usuario, los archivos multimedia insertados no se pueden reproducir de forma automática en Safari en iOS; el usuario siempre debe iniciar la reproducción".

Debido a esta restricción, las funciones y los parámetros como autoplay , playVideo() , loadVideoById() no funcionan en todos los entornos móviles.

Ejemplos

Creación de objetos YT.Player

  • Ejemplo 1: reproducción con volumen máximo

    En este ejemplo se crea un reproductor de video de 1280 píxeles por 720 píxeles. El objeto de escucha de eventos del evento onReady invoca la función setVolume para ajustar el volumen en el nivel máximo.

    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('player', {
        width: 1280,
        height: 720,
        videoId: 'M7lc1UVf-VE',
        events: {
          'onReady': onPlayerReady,
          'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
          'onStateChange': onPlayerStateChange,
          'onError': onPlayerError
        }
      });
    }
    
    function onPlayerReady(event) {
      event.target.setVolume(100);
      event.target.playVideo();
    }
  • Ejemplo 2: en este ejemplo se configuran los parámetros para reproducir automáticamente el video cuando se carga y para ocultar los controles del reproductor de video. También se agregan objetos de escucha de eventos para todos los eventos que transmite la API.

    function onYouTubeIframeAPIReady() {
      var player;
      player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: { 'autoplay': 1, 'controls': 0 },
        events: {
          'onReady': onPlayerReady,
          'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
          'onStateChange': onPlayerStateChange,
          'onError': onPlayerError
        }
      });
    }

Historial de revisiones

Esta sección enumera los cambios y las actualizaciones de la documentación de la API del reproductor IFrame de YouTube. Suscríbete a este registro de cambios. Suscribirse

April 28, 2014

This update contains the following changes:

March 25, 2014

This update contains the following changes:

  • The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.

July 23, 2013

This update contains the following changes:

  • The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.

October 31, 2012

This update contains the following changes:

  • The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.

    In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API's playlist queueing functions already supported object syntax.)

  • When called using object syntax, each of the video queueing functions supports an endSeconds property, which accepts a float/integer and specifies the time when the video should stop playing when playVideo() is called.

  • The getVideoStartBytes method has been deprecated. The method now always returns a value of 0.

August 22, 2012

This update contains the following changes:

  • The example in the Loading a video player section that demonstrates how to manually create the <iframe> tag has been updated to include a closing </iframe> tag since the onYouTubeIframeAPIReady function is only called if the closing </iframe> element is present.

August 6, 2012

This update contains the following changes:

  • The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.

  • The API supports several new functions and one new event that can be used to control the video playback speed:

    • Functions

      • getAvailablePlaybackRates – Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.
      • getPlaybackRate – Retrieve the playback rate for the cued or playing video.
      • setPlaybackRate – Set the playback rate for the cued or playing video.

    • Events

July 19, 2012

This update contains the following changes:

  • The new getVideoLoadedFraction method replaces the now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods. The new method returns the percentage of the video that the player shows as buffered.

  • The onError event may now return an error code of 5, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.

  • The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the onYouTubeIframeAPIReady function. Previously, the section indicated that the required function was named onYouTubePlayerAPIReady. Code samples throughout the document have also been updated to use the new name.

    Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an onYouTubeIframeAPIReady function and an onYouTubePlayerAPIReady function, both functions will be called, and the onYouTubeIframeAPIReady function will be called first.

  • The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to http://www.youtube.com/iframe_api. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api) will continue to work.

July 16, 2012

This update contains the following changes:

  • The Operations section now explains that the API supports the setSize() and destroy() methods. The setSize() method sets the size in pixels of the <iframe> that contains the player and the destroy() method removes the <iframe>.

June 6, 2012

This update contains the following changes:

  • We have removed the experimental status from the IFrame Player API.

  • The Loading a video player section has been updated to point out that when inserting the <iframe> element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.

    In addition, that section now notes that the insertion of the <iframe> element could affect the layout of your page if the element being replaced has a different display style than the inserted <iframe> element. By default, an <iframe> displays as an inline-block element.

March 30, 2012

This update contains the following changes:

  • The Operations section has been updated to explain that the IFrame API supports a new method, getIframe(), which returns the DOM node for the IFrame embed.

March 26, 2012

This update contains the following changes:

  • The Requirements section has been updated to note the minimum player size.