1. Home
  2. Javascript
  3. Abrir vídeo do youtube em Full HD usando a API do Youtube e embeded

Abrir vídeo do youtube em Full HD usando a API do Youtube e embeded

Índice

Como abrir um vídeo do youtube em Full HD?

1- Parâmetro na url do youtube para alterar a qualidade do vídeo

Antigamente, existiam alguns parâmetros que você passava na url do youtube para transformar a qualidade do vídeo:

No entanto, se você tentar usar esses parâmetros hoje:

https://www.youtube.com/watch?v=s7MHXDEdjS0&hd=1

Irá notar que o Youtube não respeita mais eles, eles foram depreciados.

https://developers.google.com/youtube/player_parameters#Deprecated_Parameters

2- Alterando a qualidade do vídeo usando a API do Youtube

Para podermos alterar a qualidade do vídeo, teremos que usar a API do Youtube.

Você pode obter informações da API aqui:
https://developers.google.com/youtube/js_api_reference

Aqui tem um demo de uso da API:
https://developers.google.com/youtube/youtube_player_demo

O embeded padrão de vídeo do youtube é o seguinte:

<iframe
	width="420"
	height="315"
	src="https://www.youtube.com/embed/s7MHXDEdjS0"
	frameborder="0"
	allowfullscreen>
</iframe>

O código abaixo demonstra como carregar o vídeo utilizando o swfobject.js e chamar o método setPlaybackQuality() para alterar a qualidade do vídeo para HD 1080p.

Os parâmetros aceitos pelo método setPlaybackQuality são os seguintes:

  1. Quality level small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
  2. Quality level medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
  3. Quality level large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
  4. Quality level hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
  5. Quality level hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
  6. Quality level highres: Player height is greater than 1080px, which means that the player’s aspect ratio is greater than 1920px by 1080px.
  7. Quality level default: YouTube selects the appropriate playback quality. This setting effectively reverts the quality level to the default state and nullifies any previous efforts to set playback quality using the cueVideoById, loadVideoById or setPlaybackQuality functions.

Esse método sugere o tamanho para executar o vídeo.

Na url do vídeo são adicionados os parâmetros: enablejsapi=1&&version=3 para carregar a API do Youtube.

3- Muito importante!

  1. Se você colocar esse código em uma página HTML salvar no seu computador e executar, a chamada da API não vai funcionar. O HTML deve rodar em algum servidor, um IIS por exemplo, para funcionar
  2. Como pode ser visto na lista de parâmetros aceitos pelo método setPlaybackQuality o player precisa ter um tamanho mínimo para cada formato, então não adianta ter um player de 560×315 e pedir para rodar em fullHD que não irá funcionar
  3. Você sugere ao Youtube uma qualidade para executar o vídeo, não necessariamente ele vai acatar a sua sugestão

4- Exemplo

<html>
<head>
	<title></title>
	<style type="text/css">
  	body
    	{
    		background-color: #000000;
    		text-align: center;
    	    	color: white;
    	}
  </style>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>
<body>
	<br />

	<div id="ytapiplayer">
		You need Flash player 8+ and JavaScript enabled to view this video.
	</div>

	<script type="text/javascript">
		/* ****************************************** */
		//ATENÇÃO: Esse código não funciona se você abrir a página no browser de um arquivo local, precisa acessar o arquivo de algum servidor, por exemplo IIS
		/* ****************************************** */

		var videoID = 's7MHXDEdjS0'; // ---> ALTERAR PARA O ID DO SEU VIDEO

		var params = { allowScriptAccess: "always" };
		var atts = { id: "myytplayer" };
		swfobject.embedSWF("https://www.youtube.com/v/" + videoID + "?enablejsapi=1&playerapiid=ytplayer&version=3",
						   "ytapiplayer", "1280", "720", "8", null, null, params, atts);

		function onYouTubePlayerReady(playerId) {
			var player = document.getElementById("myytplayer");
			player.setPlaybackQuality('hd1080');
			//player.playVideo();
		}
  	</script>
</body>
</html>

5- Plug-in para Chrome:

A título de curiosidade:

Tem um plugin para Google Chrome (só funciona nesse navegador) que altera a qualidade padrão de todos os vídeos que você assiste no Youtube. É a extensão: Auto HD for Youtube e pode ser baixada aqui:

https://chrome.google.com/webstore/detail/empty-title/koiaokdomkpjdgniimnkhgbilbjgpeak

Se você tem uma boa conexão de internet, você pode utilizar esse plugin para sempre assistir os vídeos na qualidade máxima.

Comentários