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:
-
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 vid
eo, identifica la etiqueta<div>
por suid
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. -
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 etiquetaasync
, 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). -
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. -
La función
onPlayerReady
se ejecuta cuando se activa el eventoonReady
. En este ejemplo, la función indica que la reproducción debe comenzar cuando el reproductor de video está listo. -
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 es1
(en reproducción), el reproductor debe reproducir un video durante seis segundos y luego invocar la funciónstopVideo
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:
-
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 elementoinline-block
. - 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 es640
.height
(número): la altura del reproductor de video. El valor predeterminado es360
.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ónonPlayerReady
se ejecuta cuando se activa el eventoonReady
y que la funciónonPlayerStateChange
se ejecuta cuando se activa el eventoonStateChange
.
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()
oseekTo()
.- 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 invocaplayVideo()
. Si se indica un valor parastartSeconds
y, a continuación, se ejecutaseekTo()
, el reproductor inicia la reproducción desde el punto indicado en la invocaciónseekTo()
. Cuando el video está en fila y listo para reproducirse, el reproductor emite un eventovideo 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 invocaplayVideo()
. Si se indica un valorendSeconds
y luego se invocaendSeconds
, el valorseekTo()
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ónsetPlaybackQuality
.
-
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ónsetPlaybackQuality
.
-
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()
oseekTo()
.- El parámetro obligatorio
mediaContentUrl
indica una URL de reproductor de YouTube completa en el formatohttp://www.youtube.com/v/VIDEO_ID?version=3
. En los feeds de video del API de datos de YouTube, el atributourl
de la etiqueta<media:content>
contiene una URL de reproductor completa cuando el atributoformat
de la etiqueta tiene un valor de5
. - 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 invocaplayVideo()
. Si se indicastartSeconds
y, a continuación, se invocaseekTo()
, el reproductor iniciará la reproducción desde el momento indicado en la invocación deseekTo()
. Cuando el video está en fila y listo para reproducirse, el reproductor transmite un eventovideo 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 invocaplayVideo()
. Si se indica un valorendSeconds
y luego se invocaendSeconds
, el valorseekTo()
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ónsetPlaybackQuality
.
-
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 formatohttp://www.youtube.com/v/VIDEO_ID?version=3
. En los feeds de video de la API de datos de YouTube, el atributourl
de la etiqueta<media:content>
contiene una URL de reproductor completa cuando el atributoformat
de la etiqueta tiene un valor de5
. - 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 indicastartSeconds
(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ónsetPlaybackQuality
.
-
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 eventovideo 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 es0
, 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ónplayVideo()
. Si se indica un valor parastartSeconds
y, a continuación, se ejecutaseekTo()
, el reproductor inicia la reproducción desde el punto indicado en la invocaciónseekTo()
. Si se pone una lista de reproducción en fila y luego se invoca la funciónplayVideoAt()
, 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ónsetPlaybackQuality
.
-
-
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 eventovideo cued
(5
).-
La propiedad opcional
listType
indica el tipo de feed de resultados que se va a recuperar. Los valores válidos sonplaylist
,search
yuser_uploads
. El valor predeterminado esplaylist
. -
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
esplaylist
, entonces la propiedadlist
especifica el ID de lalist
a 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 essearch
, la propiedadlist
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.
- Si el valor de la propiedad
-
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 es0
, 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ónplayVideo()
. Si se indica un valor parastartSeconds
y, a continuación, se ejecutaseekTo()
, el reproductor inicia la reproducción desde el punto indicado en la invocaciónseekTo()
. Si se pone en fila una lista y luego se invoca la funciónplayVideoAt()
, 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ónsetPlaybackQuality
.
-
-
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 es0
, 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ónsetPlaybackQuality
.
-
-
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 sonplaylist
,search
yuser_uploads
. El valor predeterminado esplaylist
. -
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
esplaylist
, la propiedadlist
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 essearch
, la propiedadlist
indica la consulta de búsqueda. - Si el valor de la propiedad
listType
esuser_uploads
, la propiedadlist
identifica al usuario de quien se muestran sus videos subidos.
- Si el valor de la propiedad
-
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 es0
, 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ónsetPlaybackQuality
.
-
-
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 estadoended
(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 primerostopVideo
.
Importante: A diferencia de la funciónpauseVideo
, que deja el reproductor en el estadopaused
(2
), la funciónstopVideo
podría poner el reproductor en cualquier estado de reproducción detenida, comoended
(0
),paused
(2
),video cued
(5
) ounstarted
(-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 objetoNetStream
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ámetroseconds
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 entrue
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 valor0
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 yfalse
si está activado.
player.setVolume(volume:Number):Void
- Establece el volumen. Acepta un número entero comprendido entre
0
y100
.
player.getVolume():Number
- Muestra el volumen actual del reproductor. Este puede ser un número entero comprendido entre
0
y100
. Ten en cuenta quegetVolume()
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 como0.25
,0.5
,1
,1.5
y2
.
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 en1
.
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 eventoonPlaybackRateChange
. Ten en cuenta que tu código debe responder al evento y no al hecho de haber invocado la funciónsetPlaybackRate
.
El métodogetAvailablePlaybackRates
muestra las velocidades de reproducción disponibles para el video en reproducción. Sin embargo, si se establece el parámetrosuggestedRate
en un valor decimal o entero no admitido, el reproductor redondea ese valor hasta el valor admitido más cercano a1
.
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 valortrue
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
y1
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étodosgetVideoBytesLoaded
ygetVideoBytesTotal
.
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 entre0
y1000
que se aproxima a la cantidad de video cargado. Es posible calcular la fracción del video cargado dividiendo el valorgetVideoBytesLoaded
por el valorgetVideoBytesTotal
.
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 de1000
. Es posible calcular la fracción del video cargado dividiendo el valorgetVideoBytesLoaded
por el valorgetVideoBytesTotal
.
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
ysmall
. También puede mostrarundefined
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ónsetPlaybackQuality
.
El valordel parámetro puede ser
small
,medium
,large
,hd720
,hd1080
,highres
odefault
. Se recomienda establecer el valor de parámetro comodefault
; 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 videohd720
se verá mejor que una calidad de videohd1080
. Se recomienda invocar la funcióngetAvailableQualityLevels()
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ámetrosuggestedQuality
endefault
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 funcionescueVideoById
,loadVideoById
osetPlaybackQuality
.
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 calidadlarge
, pero el nivel no está disponible, la calidad de reproducción se ajustará amedium
(siempre y cuando el nivel de calidad esté disponible).
Asimismo, establecersuggestedQuality
en un valor que no es un nivel de calidad reconocido equivale a establecersuggestedQuality
endefault
. - Nivel de calidad
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 sonhighres
,hd1080
,hd720
,large
,medium
ysmall
. 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óngetDuration()
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óngetPlaylist()
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 valorlistener
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 eventoonReady
no especifica una propiedaddata
.
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 propiedadtarget
, que identifica el reproductor. La función recupera el código insertado del vid
eo cargado actualmente, inicia la reproducción del video y muestra el código insertado en el elemento de página cuyo valorid
esembed-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)
unstarted
(-1
). Cuando un video está en cola y listo para reproducirse, el reproductor transmite un eventovideo 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ónsetPlaybackQuality(suggestedQuality)
. Del mismo modo, tu código no debe suponer que la calidad de reproducción solo cambia al invocar explícitamentesetPlaybackQuality
o cualquier otra función que permita definir una calidad de reproducción sugerida.
El valor de la propiedaddata
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ónsetPlaybackRate(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 desetPlaybackRate
.
El valor de la propiedaddata
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étodogetAvailablePlaybackRates
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 deevent
os. La propiedaddata
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 error101
son idénticos. No es más que un error101
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ódulocc
, que controla los subtítulos opcionales en el reproductor. Cuando se recibe un eventoonApiChange
, tu aplicación puede usar el siguiente comando para determinar las opciones que se pueden establecer para el módulocc
:
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
y3
. El tamaño predeterminado es0
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 que3
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 entrue
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ónsetVolume
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.
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
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 whenplayVideo()
is called. -
The
getVideoStartBytes
method has been deprecated. The method now always returns a value of0
.
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 theonYouTubeIframeAPIReady
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
onPlaybackRateChange
– This event fires when the video's playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFraction
method replaces the now-deprecatedgetVideoBytesLoaded
andgetVideoBytesTotal
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 of5
, 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 namedonYouTubePlayerAPIReady
. 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 anonYouTubePlayerAPIReady
function, both functions will be called, and theonYouTubeIframeAPIReady
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()
anddestroy()
methods. ThesetSize()
method sets the size in pixels of the<iframe>
that contains the player and thedestroy()
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 aninline-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.
A menos que se indique lo contrario, el contenido de esta página está sujeto a la licencia Reconocimiento 4.0 de Creative Commons y las muestras de código están sujetas a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio web de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2023-11-20 (UTC).