Visão geral
Este documento explica como incorporar um player do YouTube em seu aplicativo e ainda define os parâmetros disponíveis nele.
Anexando parâmetros no URL do IFrame, você personaliza a experiência de reprodução em seu aplicativo. Por exemplo, é possível reproduzir vídeos de modo automático com o parâmetro autoplay
ou de forma repetida com o parâmetro loop
. Você também pode ativar a API JavaScript para o player com o parâmetro enablejsapi
.
No momento, estão definidos nesta página todos os parâmetros aceitos em qualquer player incorporado do YouTube. A definição de cada parâmetro identifica os players que o aceitam.
Nota: É necessário que os players incorporados tenham uma Janela de visualização de pelo menos 200 px por 200 px. Se o player mostra controles, ele tem que ser grande o suficiente para exibir completamente os controles sem encolher a Janela visualização abaixo do tamanho mínimo. Recomendamos que players de 16:9 tenham pelo menos 480 pixels de largura e 270 pixels de altura.
Como incorporar um player do YouTube
Você pode usar qualquer método a seguir para incorporar um player do YouTube em seu aplicativo e especificar seus parâmetros. As instruções abaixo demonstram como incorporar um player que carregue um vídeo único. A seção a seguir explica como configurar seu player para carregar outros tipos de conteúdo, como playlists e resultados de pesquisas.
Incorporações do IFrame com tags <iframe>
Defina em seu aplicativo uma tag do <iframe>
em que o URL src
especifique o conteúdo que o player carregará, além de todos os outros parâmetros do player que deseje definir. Os parâmetros height
e width
da tag do <iframe>
especificam as dimensões do player.
Ao criar o elemento <iframe>
sem usar o IFrame Player API, você pode anexar os parâmetros do player diretamente no final do URL, cujo formato é:
https://www.youtube.com/embed/VIDEO_ID
A tag <iframe>
abaixo carrega um player de 640 x 360 px que reproduz o vídeo M7lc1UVf-VE
do YouTube. Já que o URL define o parâmetro autoplay
como 1
, o vídeo é reproduzido automaticamente assim que o player é carregado.
<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=https://example.com" frameborder="0"/>
Incorporações do IFrame usando IFrame Player API
Siga as instruções da IFrame Player API para inserir um player de vídeo em sua página da Web ou em seu aplicativo após o carregamento do código de JavaScript da API do player. O segundo parâmetro no construtor do player de vídeo é um objeto que especifica as opções do player. Dentro desse objeto, a propriedade playerVars
identifica parâmetros do player.
Os códigos HTML e JavaScript, abaixo, mostram um exemplo simples que insere um player do YouTube no elemento da página que tem um valor de id
de ytplayer
. A função onYouTubePlayerAPIReady()
especificada aqui é chamada automaticamente quando o código da IFrame Player API é carregado. Este código não define parâmetros do player nem outros manipuladores de eventos.
<div id="ytplayer"></div> <script> // Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Replace the 'ytplayer' element with an <iframe> and // YouTube player after the API code downloads. var player; function onYouTubePlayerAPIReady() { player = new YT.Player('ytplayer', { height: '360', width: '640', videoId: 'M7lc1UVf-VE' }); } </script>
Como selecionar conteúdo para reproduzir
É possível configurar seu player incorporado para carregar um vídeo, vídeos carregados pelo usuário ou resultados de pesquisa de determinada consulta.
A lista que segue explica essas opções:
-
Carregar um vídeo
Para uma incorporação do IFrame, o ID do vídeo do YouTube para o vídeo que você deseja carregar é especificado no URL
src
do IFrame.Se estiver usando a API de dados (v3) do YouTube, você pode construir esses URLs de forma programática com a recuperação dos IDs do vídeo de resultados de pesquisa, recursos de item de playlist, recursos de vídeo ou outros recursos. Depois de conseguir um ID do vídeo, substitua o texto
VIDEO_ID
nos URLs acima por esse valor para criar o URL do player. -
Carregar uma playlist
Configure o parâmetro
listType
do player comoplaylist
. Além disso, defina o parâmetrolist
do player como o ID da playlist do YouTube que deseja carregar.É necessário adicionar as letras
PL
no início do ID da playlist, conforme mostrado no exemplo a seguir:Se estiver usando a API de dados (v3) do YouTube, você pode construir esses URLs de forma programática com a recuperação dos IDs da playlist de resultados de pesquisa, recursos do canal ou recursos de atividade. Depois de recuperar um ID da playlist, substitua o texto
PLAYLIST_ID
no URL acima por esse valor. -
Carregar vídeos enviados por um usuário
Defina o parâmetro
listType
do player comouser_uploads
. Defina também o parâmetrolist
do player como o nome de usuário do YouTube cujos vídeos enviados você deseja carregar. -
Carregar resultados de pesquisa referentes a uma consulta especificada
Defina o parâmetro
listType
do player comosearch
. Defina também o parâmetrolist
do player como o termo de consulta que você quer que seja carregado nos resultados da pesquisa do player.
Parâmetros
Todos os parâmetros a seguir são opcionais.
Parameters | |
---|---|
|
Valores: 0 ou 1 . O valor padrão é 0 . Define se o vídeo inicial será ou não reproduzido automaticamente quando o player é carregado. |
|
Valores: 1 . O padrão é baseado na preferência do usuário. Definir esse parâmetro como 1 fará com que as legendas ocultas sejam mostradas por padrão, mesmo que o usuário tenha desativado as legendas. |
|
Este parâmetro especifica a cor que será usada na barra de progresso do vídeo, no player, para destacar a quantidade de vídeos que o usuário já visualizou. Os valores válidos dos parâmetros são red e white e, por padrão, o player usará a cor vermelha na barra de progresso do vídeo. Acesse o blog de API do YouTube para mais informações sobre opções de cores.Nota: configurar o parâmetro color como white desativará a opção modestbranding . |
|
Valores: 0 , 1 ou 2 . O padrão é 1 . Este parâmetro indica se os controles do player do vídeo serão exibidos. Para incorporações do IFrame carregando um Flash player, o parâmetro também define quando os controles serão exibidos no player e quando o player carregará:
Nota: os valores de parâmetro 1 e 2 oferecem uma experiência do usuário idêntica, porém, controls=2 traz uma melhoria de desempenho com relação a controls=1 para incorporações do IFrame. No momento, os dois valores ainda geram algumas diferenças visuais no player, como tamanho da fonte do título do vídeo. No entanto, quando a diferença entre os dois valores se torna praticamente invisível para o usuário, o valor padrão do parâmetro pode variar entre 1 e 2 . |
|
Valores: 0 ou 1 . O padrão é 0 . Definir como 1 desabilita os controles de teclado do player. Os controles do teclado são os seguintes:
|
|
Valores: 0 ou 1 . O valor padrão é 0 . Configurar este parâmetro como 1 ativará a API Javascript. Para mais informações sobre a API Javascript e como utilizá-la, consulte a documentação da API JavaScript. |
|
Valores: um número inteiro positivo. Este parâmetro especifica o tempo, medido em segundos, desde o início do vídeo, quando o player deve parar de reproduzir o vídeo. O tempo é medido do início do vídeo, não do valor do parâmetro start do player nem do parâmetro startSeconds , usado nas funções da API do Player do YouTube para carregar ou consultar um vídeo. |
|
Valores: 0 ou 1 . O valor padrão é 1 , que ativa a exibição do botão de tela cheia. Definir este parâmetro como 0 impede que o botão de tela inteira apareça. |
|
Define o idioma da interface do player. O valor do parâmetro é um código de idioma de duas letras ISO 639-1, embora outros códigos de entrada de idioma como tags de idioma IETF (BCP 47) também possam ser tratados adequadamente. O idioma da interface é utilizado para dicas de ferramenta no player e também afeta a faixa de legenda padrão. É possível que um idioma da faixa de legenda diferente seja selecionado pelo YouTube para um determinado usuário com base nas preferências individuais de idioma do usuário e na disponibilidade das faixas de legenda. |
|
Valores: 1 ou 3 . O valor padrão é 1 . Definir como 1 fará com que as anotações do vídeo sejam exibidas por padrão, enquanto definir como 3 fará com que elas não apareçam. |
|
O conteúdo que será carregado no player é identificado no parâmetro list combinado com o parâmetro listType .
Nota: se você especificar valores para os parâmetros list e listType , não será necessário que um ID do vídeo seja especificado no URL das incorporações do IFrame. |
|
O conteúdo que será carregado no player é identificado pelo parâmetro listType combinado com o parâmetro list . Os valores dos parâmetros válidos são playlist , search e user_uploads .Se você especificar valores para os parâmetros list e listType , não será necessário que um ID do vídeo seja especificado no URL das incorporações do IFrame. |
|
Valores: 0 ou 1 . O valor padrão é 0 . No caso de um único player de vídeo, uma configuração igual a 1 fará com que o player reproduza o vídeo inicial repetidamente. No caso de um player de playlist (ou player personalizado), o player reproduzirá a playlist inteira e, em seguida, começará novamente a partir do primeiro vídeo.Nota: este parâmetro tem suporte limitado no player AS3 e nas incorporações do IFrame, que pode carregar tanto player AS3 quanto HTML5. No momento, o parâmetro loop funciona somente no player AS3 quando usado com o parâmetro playlist . Para reproduzir um vídeo repetidamente, defina o valor do parâmetro loop como 1 e o valor do parâmetro playlist como o mesmo ID do vídeo já especificado no URL da API do player:https://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID |
|
Este parâmetro permite usar um player do YouTube que não exiba o logotipo do YouTube. Defina o valor do parâmetro como 1 para impedir que o logotipo do YouTube seja exibido na barra de controle. Um pequeno rótulo de texto do YouTube ainda aparece no canto superior direito de um vídeo pausado quando o ponteiro do mouse do usuário passa sobre o player. |
|
Este parâmetro fornece uma medida de segurança adicional para o IFrame API, sendo aceito apenas em incorporações do IFrame. Usar a API do IFrame significa que você definiu o valor do parâmetro enablejsapi como 1 . Sempre especifique seu domínio como o valor do parâmetro origin . |
|
Valor é uma lista de IDs de vídeos separados por vírgulas a ser reproduzida. Se você especificar um valor, o primeiro vídeo a ser reproduzido será o VIDEO_ID especificado no caminho do URL, e os vídeos especificados no parâmetro playlist serão reproduzidos em seguida. |
|
Este parâmetro controla se os vídeos são reproduzidos in-line ou em tela cheia em um player HTML5 no iOS. Os valores válidos são:
|
|
Valores: 0 ou 1 . O valor padrão é 1 . Este parâmetro indica se o player deve exibir vídeos relacionados quando a reprodução do vídeo inicial acaba. |
|
Valores: 0 ou 1 . O valor padrão do parâmetro é 1 . Se você definir o valor do parâmetro como 0 , o player não exibirá informações como título do vídeo e remetente antes de o vídeo começar a ser reproduzido.Se o player estiver carregando uma playlist e você definir explicitamente o valor como 1 , ao carregar, o player também exibirá imagens em miniatura dos vídeos na lista. Essa funcionalidade é aceita apenas no player AS3, o único capaz de carregar uma playlist. |
|
Valores: um número inteiro positivo. Este parâmetro faz com que o player comece a reproduzir o vídeo em um número determinado de segundos a partir do início do vídeo. Assim como na função seekTo , o player buscará o keyframe mais próximo ao tempo que você especificar. Isso quer dizer que, algumas vezes, o marcador da reprodução pode chegar até um pouco antes do tempo solicitado, não mais do que dois segundos, em geral. |