Contente

• Como incorporar vídeos do YouTube no seu aplicativo Android
• Recuperando o ID de um vídeo do YouTube
• Obtenha a impressão digital SHA-1 do seu projeto
• Registre-se no Google API Console
• Faça o download da API do player Android do YouTube
• Atualize seu manifesto
• Construindo o layout do YouTube Player
• Implementando o Player do YouTube
• 1. Estenda o YouTubeBaseActivity
• 2. Inicialize o Player do YouTube
• 3. Implementar onInitializationSuccess e onInitializationFailure
• Reproduzindo um vídeo do YouTube: código concluído
• Testando a API do Player Android do YouTube
• Exibir conteúdo do Dailymotion em um WebView
• Obter o ID do vídeo Dailymotion
• Adicionando o SDK do Dailymotion
• Solicitando acesso à Internet
• Adicionando o widget PlayerWebView do Dailymotion
• Configurando nosso Dailymotion PlayerWebView
• Incorporando um vídeo do Vimeo
• Atualizando o manifesto
• Adicionando um WebView à nossa interface do usuário
• Escolha seu vídeo
• Exibindo uma página da Web no seu aplicativo Android
• Testando seu aplicativo Vimeo
• Empacotando

Quando o MediaController estiver visível na tela, você poderá reproduzir, pausar, retroceder e avançar rapidamente o vídeo e pular para qualquer ponto do clipe arrastando a barra de progresso do MediaController.

Como incorporar vídeos do YouTube no seu aplicativo Android

A incorporação de um arquivo de vídeo no seu aplicativo é uma ótima maneira de garantir que o vídeo esteja sempre disponível, independentemente da conexão com a Internet do dispositivo. No entanto, incorporar vários vídeos grandes e de alta resolução no seu aplicativo também é uma ótima maneira de aumentar o tamanho do seu APK!

Se você está preocupado com o tamanho do APK ou se seu aplicativo inclui vídeos que devem adicionar extras, convém publicar esses vídeos em uma plataforma online e transmiti-los pelo aplicativo em tempo de execução.

Quando se trata de publicar vídeos on-line, há um site que vem à mente instantaneamente. Portanto, nesta seção, mostrarei como incorporar qualquer Vídeo do YouTube em seu aplicativo, usando a biblioteca cliente da API do Android Player do YouTube.

Recuperando o ID de um vídeo do YouTube

Para começar, você precisa decidir qual vídeo do YouTube deseja exibir e recuperar seu ID de vídeo exclusivo.

Você pode usar qualquer vídeo do YouTube, mas estou optando pela tecnologia favorita de 2018. Carregue o vídeo escolhido e dê uma olhada no URL na barra de endereços do navegador, por exemplo, o URL do vídeo é:

youtube.com/watch?v=hJLBcViaX8Q

O ID é a parte do URL que identifica exclusivamente este vídeo, que é a sequência de caracteres no final do URL (basicamente, tudo depois do símbolo "="). O ID do vídeo é:

hJLBcViaX8Q

Anote o código do seu vídeo, pois usaremos isso mais tarde.

Obtenha a impressão digital SHA-1 do seu projeto

Para acessar a API do player Android do YouTube, você precisa gerar uma chave de API com restrições do Android. Isso envolve vincular a chave da API ao nome do pacote exclusivo e à impressão digital do certificado (SHA-1).

Você pode recuperar a impressão digital SHA-1 do seu projeto, via Gradle Console:

• Selecione a guia Gradle no lado direito da janela do Android Studio.
• Selecione o módulo "app", seguido de "Tasks> Android> signatureReport".

• Abra a guia Gradle Console que aparece na parte inferior direita da tela.
• O Gradle Console será aberto automaticamente. Encontre o valor SHA-1 nesta janela e anote-o.

Estamos usando uma impressão digital de certificado de depuração, que é adequada apenas para testar um aplicativo. Antes de publicar um aplicativo, você sempre deve gerar uma nova chave de API com base no certificado de liberação desse aplicativo.

Registre-se no Google API Console

Antes de poder usar a API do YouTube Android Player, você precisa registrar seu aplicativo no Google API Console:

• Vá para o Console da API.
  No cabeçalho, selecione o nome do seu projeto atual (onde o cursor está posicionado na captura de tela a seguir).

• Na janela subseqüente, selecione "Novo projeto".
• Dê um nome ao seu projeto e clique em "Criar".
• No menu à esquerda, selecione "Credenciais".
• Dê um clique no botão azul "Criar credenciais" e selecione "Chave da API".
• Sua chave de API agora aparecerá em um pop-up, que inclui um prompt para restringir essa chave de API. As chaves restritas são mais seguras; portanto, a menos que você exija especificamente uma chave de API irrestrita, opte por "Restringir chave".
• Na tela subseqüente, atribua um nome distinto à sua chave de API.
• Selecione o botão de opção "Aplicativos Android".
• Clique em "Adicionar nome do pacote e impressão digital".
• Copie / cole a impressão digital SHA-1 do seu projeto na seção subseqüente e digite o nome do pacote do projeto (que aparece na parte superior de cada arquivo de classe Java e no Manifesto do seu projeto).
• Quando estiver satisfeito com as informações inseridas, clique em "Salvar".

Faça o download da API do player Android do YouTube

Em seguida, você precisará baixar a biblioteca do cliente da API do Android Player do YouTube. Ao usar esta biblioteca, é recomendável ativar o ProGuard para ajudar a manter seu APK o mais leve possível.

Para adicionar a biblioteca do YouTube ao seu projeto:

• Acesse o site do YouTube Android Player e faça o download da versão mais recente.
• Descompacte o arquivo zip subsequente.
• Abra a pasta descompactada recentemente e navegue até a subpasta "libs" - ela deve conter um arquivo "YouTubeAndroidPlayerApi.jar".
• No Android Studio, mude para a visualização "Projeto".
• Para garantir que a biblioteca do YouTube seja incluída no seu caminho de criação, você precisará importar o .jar para o "diretório / libs ”. Abra a pasta "app / libs" do seu projeto e arraste e solte o .jar na posição.

• Abra o arquivo build.gradle e adicione a biblioteca do YouTube como uma dependência do projeto:

dependências {implementação fileTree (dir: libs, incluem:) implementação com.android.support:appcompat-v7:28.0.0 implementação com.android.support:design:28.0.0 implementação com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Adicione os seguintes // arquivos de implementação (libs / YouTubeAndroidPlayerApi.jar)}

• Quando solicitado, sincronize seus arquivos Gradle.

Atualize seu manifesto

Se o seu aplicativo for exibido qualquer conteúdo de vídeo on-line, será necessário acessar a Internet.

Abra o manifesto do seu projeto e adicione a permissão da Internet:

Para dar ao usuário uma amostra dessa experiência cinematográfica e widescreen, também estou configurando o MainActivity para iniciar no modo paisagem:

Construindo o layout do YouTube Player

Você pode exibir um vídeo do YouTube usando:

• YouTubePlayerView. Se você deseja usar o YouTubePlayerView em seu layout, precisará estender o YouTubeBaseActivity na classe de atividade correspondente desse layout.
• YouTubePlayerFragment. Este é um fragmento que contém um YouTubePlayerView. Se você optar por implementar um YouTubePlayerFragment, então você não vai precisa estender a partir do YouTubeBaseActivity.

Vou usar o YouTubePlayerView, então abra o arquivo "activity_main.xml" do seu projeto e adicione um widget YouTubePlayerView:

Implementando o Player do YouTube

Em seguida, abra sua MainActivity e execute as seguintes tarefas:

1. Estenda o YouTubeBaseActivity

Como estamos usando um YouTubePlayerView em nosso layout, precisamos estender o YouTubeBaseActivity:

classe pública MainActivity estende YouTubeBaseActivity {

2. Inicialize o Player do YouTube

Inicializamos o Player do YouTube chamando initialize () e passando a chave da API que criamos anteriormente:

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, novo YouTubePlayer.OnInitializedListener () {

3. Implementar onInitializationSuccess e onInitializationFailure

Por fim, precisamos especificar como nosso aplicativo deve reagir, dependendo se a inicialização é um sucesso ou uma falha. Se o Player do YouTube foi inicializado com sucesso, podemos carregar nosso vídeo, passando o ID do vídeo exclusivo:

public void onInitializationSuccess (provedor YouTubePlayer.Provider, YouTubePlayer youTubePlayer, booleano b) {// Especifique o ID do vídeo // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Em seguida, precisamos informar ao nosso aplicativo como ele deve lidar com as inicializações com falha. Vou exibir um brinde:

public void onInitializationFailure (provedor YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Ocorreu um erro", Toast.LENGTH_SHORT) .show (); }

Reproduzindo um vídeo do YouTube: código concluído

Adicione tudo o que precede à sua MainActivity, e você deverá terminar com algo assim:

importar android.os.Bundle; importar android.widget.Toast; importar com.google.android.youtube.player.YouTubeBaseActivity; importar com.google.android.youtube.player.YouTubeInitializationResult; importar com.google.android.youtube.player.YouTubePlayer; importar com.google.android.youtube.player.YouTubePlayerView; // Extend YouTubeBaseActivity // public class MainActivity extends YouTubeBaseActivity {// Não se esqueça de substituí-lo por sua própria chave de API exclusiva // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override void protegido onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inicialize o Player do YouTube // youTubePlayerView.initialize (YOUR_API_KEY, novo YouTubePlayer.OnInitializedListener () {@Override // Se o YouTube Player for inicializado com sucesso ... // public void onInitializationSuccess (provedor YouTubePlayer.Provider, YouTubePlayer.Provider, YouTubePlayer youTubePlayer, booleano b) {//..Em seguida, comece a reproduzir o vídeo a seguir // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Se a inicialização falhar ... // public void onInitializationFailure (provedor YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {//...depois, exibe um brinde // Toast.makeText (MainActivity.this, "Ocorreu um erro", Toast.LENGTH_SHORT) .show ();}}); }}

Testando a API do Player Android do YouTube

Você pode testar este aplicativo em um smartphone ou tablet Android físico ou em um AVD. Se você estiver usando um AVD, verifique se está usando uma imagem do sistema que inclui os serviços do Google Play. O aplicativo do YouTube também deve ser instalado no AVD ou no dispositivo físico Android, pois a API do YouTube depende de um serviço distribuído como parte do aplicativo do YouTube para Android.

Instale o projeto no seu dispositivo, e o vídeo do YouTube começará a ser reproduzido automaticamente assim que o aplicativo for carregado. Se você tocar no vídeo, terá acesso a todos os controles familiares do YouTube que você pode usar para pausar, reproduzir, avançar rapidamente e retroceder o vídeo.

Exibir conteúdo do Dailymotion em um WebView

Quando se trata de incorporar vídeos no seu aplicativo Android, há uma grande variedade de plataformas de compartilhamento de vídeo que você pode escolher, e algumas plataformas até produziram SDKs dedicados a ajudar você a interagir com o conteúdo deles, incluindo o Dailymotion.

O Dailymotion Player SDK para Android fornece um invólucro fino ao redor do componente WebView do Android, que facilita a incorporação de vídeos Dailymotion em seus aplicativos.

Nesta seção, mostrarei como transmitir qualquer vídeo do site Dailymotion, usando o SDK do Dailymotion Player de terceiros.

Obter o ID do vídeo Dailymotion

Primeiro, vá para o Dailymotion, encontre um vídeo que deseja exibir e recupere seu ID.

Vou usar este vídeo com lapso de tempo de neblina, que tem o seguinte URL:

www.dailymotion.com/video/x71jlg3

O ID do vídeo é a sequência única de caracteres no final de seu URL. Portanto, meu ID de vídeo é: x71jlg3.

Adicionando o SDK do Dailymotion

Como estamos usando o Dailymotion SDK, precisamos declará-lo como uma dependência do projeto. Abra o arquivo build.gradle do seu projeto e adicione o seguinte:

dependências {implementação fileTree (dir: libs, include:) // Adicione o seguinte // implementação com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementação com.android.support:appcompat-v7:28.0.0 com.android.support:design:28.0.0 implementação com.android.support.constraint: layout de restrição: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Quando solicitado, selecione "Sincronizar projeto com arquivos Gradle".

Observe que, por padrão, o SDK do Dailymotion apenas dá acesso aos dados públicos do Dailymotion, como o título e a descrição de um vídeo.Você pode executar algumas tarefas adicionais registrando seu aplicativo na plataforma Dailymotion, mas como apenas queremos incorporar um vídeo, não precisamos nos preocupar em registrar nosso aplicativo.

Se você estiver interessado em adicionar mais funcionalidades do Dailymotion aos seus aplicativos, poderá saber mais sobre como registrar seu aplicativo no Dailymotion, nos documentos oficiais.

Solicitando acesso à Internet

Mais uma vez, estamos transmitindo conteúdo da World Wide Web, portanto, nosso projeto requer a permissão da Internet:

Toda atividade que exibe o conteúdo do Dailymotion deve ter um atributo "android: configChanges"; portanto, adicione o seguinte à sua MainActivity:

Adicionando o widget PlayerWebView do Dailymotion

O principal componente do Dailymotion SDK é um elemento de interface do usuário PlayerWebView, que fornece um invólucro fino ao redor do componente WebView do Android.

Exploraremos os WebViews com mais detalhes na seção a seguir, mas os WebViews essencialmente oferecem uma maneira de incorporar páginas da Web em seu aplicativo. Se não estivéssemos usando o PlayerWebView especializado do SDK, poderíamos usar o componente WebView baunilha do Android para exibir uma página da web Dailymotion inteira em nosso aplicativo.

Em vez disso, vamos adicionar um PlayerWebView ao nosso layout:

Configurando nosso Dailymotion PlayerWebView

Agora que implementamos o widget PlayerWebView, precisamos configurá-lo em nossa classe Activity correspondente.

Abra sua MainActivity e comece obtendo uma referência ao PlayerWebView:

dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);

Em seguida, chame "dailyMotionPlayer.load" e transmita o ID do vídeo que recuperamos anteriormente:

dailyMotionPlayer.load ("x71jlg3");

Isso nos dá o seguinte:

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar com.dailymotion.android.player.sdk.PlayerWebView; importar java.util.HashMap; importar java.util.Map; classe pública MainActivity estende AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override void protegido onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Recupera nosso PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Mapa playerParams = novo HashMap <> (); // Carrega o vídeo com nossos parâmetros // playerParams.put ("key", "value"); // Passa o ID do vídeo // dailyMotionPlayer.load ("x71jlg3"); }}

Instale seu projeto em um dispositivo ou emulador físico Android, e o vídeo do Dailymotion deve começar a ser reproduzido automaticamente.

Incorporando um vídeo do Vimeo

Quando se trata de incorporar conteúdo de vídeo, normalmente você deseja usar uma API específica da plataforma ou SDK específico da plataforma sempre que possível. Mas e se não houver um SDK ou API disponível para a plataforma de compartilhamento de vídeo que você tem em mente?

Nesses cenários, você pode usar o componente WebView do Android para exibir o vídeo como uma página da Web incorporada ao layout da sua atividade. Nesta seção final, mostrarei como incorporar um vídeo da popular plataforma Vimeo, usando um WebView.

Além de exibir o conteúdo de vídeo, os WebViews podem ser úteis em vários outros cenários. Por exemplo, imagine que você tenha algum conteúdo que precise ser atualizado regularmente; hospedar esse conteúdo on-line e depois exibi-lo em seu aplicativo via WebView oferece a flexibilidade de alterar esse conteúdo on-line a qualquer momento, sem a necessidade de publicar uma nova versão do seu aplicativo. No entanto, tenha cuidado ao usar o WebViews, pois eles não suportam muitos dos recursos que você normalmente espera de um navegador da web independente. Em particular, as WebViews não possuem uma barra de endereço ou controles de navegação, o que pode dificultar o conteúdo para os usuários interagirem.

Antes de usar um WebView, você deve sempre considerar se uma solução alternativa pode ser mais apropriada; por exemplo, você pode transferir o conteúdo para o navegador da web padrão do dispositivo ou implementar as guias personalizadas do Chrome.

Atualizando o manifesto

Como transmitimos um vídeo da Internet, precisamos adicionar a permissão da Internet ao nosso manifesto:

Também vou iniciar o MainActivity no modo paisagem:

Adicionando um WebView à nossa interface do usuário

Em seguida, vamos adicionar um WebView ao nosso aplicativo. Podemos adicionar o WebView ao layout da nossa atividade ou transformar toda a atividade em um WebView, implementando-o no método onCreate () do nosso aplicativo.

Vou adicionar um WebView ao layout do nosso aplicativo:

Escolha seu vídeo

Mais uma vez, precisamos de um vídeo para exibir, mas desta vez estamos não usando um ID de vídeo:

• Vá para o Vimeo e escolha um vídeo que você deseja usar; Optei por esse lapso de inverno.
• Dê um clique no botão "Compartilhar".
• Selecione o ícone "Incorporar"; isso fornecerá um código de incorporação que deve ser algo como isto:

Este código fornece as seguintes informações:

• iframe. Especifica que estamos incorporando outra página HTML no contexto atual.
• src. O caminho do vídeo, para que seu aplicativo saiba onde encontrar esse vídeo.
• largura altura. As dimensões do vídeo.
• moldura. Se deve ser exibida uma borda ao redor do quadro do vídeo. Os valores possíveis são borda (1) e sem borda (0).
• Permitir tela cheia. Isso permite que o vídeo seja exibido no modo de tela cheia.

Vou adicionar esse código de incorporação ao meu projeto como uma sequência, portanto, você precisa copiar / colar essas informações no seguinte modelo:

String vimeoVideo = "SEU LINK VAI AQUI';

Frustrantemente, precisamos fazer algumas alterações antes que o código de incorporação seja compatível com nosso aplicativo Android. Primeiro, precisamos adicionar alguns caracteres "", para que o Android Studio não se queixe de formatação incorreta:

String vimeoVideo = "';

Por fim, as dimensões de vídeo padrão podem ser muito grandes para algumas telas de smartphones Android.
Na produção, você normalmente experimenta várias dimensões para ver o que oferece os melhores resultados, com o maior número possível de configurações de tela possíveis. No entanto, para ajudar a manter este artigo fora de controle, vou usar o seguinte, que deve fornecer bons resultados na tela "típica" de um smartphone Android:

String vimeoVideo = "';

Exibindo uma página da Web no seu aplicativo Android

Agora, criamos nosso layout e já temos nosso HTML pronto, abra sua MainActivity e vamos implementar nosso WebView.

Comece adicionando a string HTML:

String vimeoVideo = "';

Em seguida, precisamos carregar a página da Web acima em nosso WebView, usando o método loadUrl ():

webView.loadUrl (request.getUrl (). toString ());

O JavaScript está desativado por padrão, portanto, precisamos ativá-lo em nosso WebView.

Sempre que você cria um WebView, ele recebe automaticamente um conjunto de configurações da Web padrão. Recuperamos esse objeto WebSettings usando o método getSettings () e, em seguida, ativamos o JavaScript usando setJavaScriptEnabled ().

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true);

Depois de adicionar tudo isso à sua MainActivity, seu código deve ficar assim:

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar android.webkit.WebResourceRequest; importar android.webkit.WebSettings; importar android.webkit.WebView; importar android.webkit.WebViewClient; classe pública MainActivity estende AppCompatActivity {@Override void protegido onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (novo WebViewClient () {@Override público booleano shouldOverrideUrlLoading (solicitação WebView webView, WebResourceRequest) {webView.loadUrl (request.getUrl ().) ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Testando seu aplicativo Vimeo

Você já sabe o que fazer agora: instale este projeto em um dispositivo Android físico ou no AVD. O WebView não está definido para ser reproduzido automaticamente, portanto, você precisa dar um toque no vídeo para revelar os controles de mídia do Vimeo. Você pode reproduzir, pausar, retroceder e avançar rapidamente no vídeo, para garantir que esteja funcionando corretamente.

Empacotando

Neste artigo, mostrei como adicionar vídeos do YouTube, Vimeo e Dailymotion aos seus aplicativos, usando APIs e SDKs específicos da plataforma e o componente WebView do próprio Android. Também mostrei como agrupar um arquivo de vídeo com seu aplicativo, para que ele possa ser armazenado e reproduzido localmente.

Qual é a sua maneira favorita de exibir conteúdo multimídia para seus usuários? Deixe-nos saber nos comentários abaixo!