Incorporar vídeos do Google Drive no site usando vídeo HTML5

Como incorporar vídeos do Google Drive no site usando vídeo HTML5

Incorporar um vídeo do Google Drive usando o elemento HTML5 Video é uma maneira simples e eficaz de compartilhar seus vídeos com seu público. Com apenas algumas etapas fáceis, você pode enviar e compartilhar seus vídeos no Google Drive e incorporá-los em seu site ou blog. Então, comece a compartilhar seus vídeos hoje e aproveite os benefícios do elemento HTML5 Video!

O Google Drive fornece recursos para armazenar e compartilhar arquivos online. Além disso, o Google Drive também suporta a incorporação de vídeos armazenados em contas do Google Drive em páginas da web.

Para adicionar um vídeo do Google Drive com elementos de vídeo HTML5, você precisará primeiro criar um trecho de código HTML. Esse código incluirá o elemento de vídeo HTML5 e especificará a origem do vídeo. Em seguida, você precisará adicionar esse código ao seu vídeo do Google Drive.

Para usar elementos de vídeo HTML5 para vídeos do Google Drive, você deve usar uma chave de API do Google Drive para sua fonte de vídeo.

Criando uma API para o Google Drive

O Google Drive é uma plataforma popular de armazenamento em nuvem que oferece uma variedade de recursos e integrações. Para tornar a plataforma ainda mais útil para os desenvolvedores, o Google oferece uma API que pode ser usada para acessar e manipular arquivos armazenados no Google Drive de forma programática. Neste artigo, veremos as etapas necessárias para criar uma API para o Google Drive.

Etapa 1: criar um projeto do Google Cloud Platform

A primeira etapa na criação de uma API para o Google Drive é criar um projeto do Google Cloud Platform. Para fazer isso, vá para o Console do Google Cloud e faça login em sua conta do Google e crie um novo projeto.

Etapa 2: ativar a API do Google Drive

Depois de criar um novo projeto, você precisa ativar a API do Google Drive. Para fazer isso, navegue até a seção APIs e serviços do Cloud Console e procure a API do Google Drive. Clique na API e, em seguida, clique no botão Ativar para ativar a API.

Etapa 3: gerar credenciais de API

Depois que a API estiver habilitada, você precisará gerar credenciais de API que serão usadas para autenticar suas solicitações. Para fazer isso, vá para a seção Credenciais do Cloud Console e clique no botão Criar Credenciais. Selecione a opção Chave de API e siga os prompts para criar as credenciais.

Etapa 4: autorizar o acesso à API

Antes de começar a usar a API, você precisa autorizar o acesso à sua conta do Google Drive. Para fazer isso, siga as etapas na seção Autorização da documentação da API do Google Drive.

Etapa 5: usar a API

Depois de concluir as etapas anteriores, você estará pronto para começar a usar a API do Google Drive. Você pode usar a API para criar, ler, atualizar e excluir arquivos armazenados em sua conta do Google Drive. Consulte a documentação da API do Google Drive para obter detalhes sobre como usar a API.

Aqui está um tutorial sobre como incorporar um vídeo do Google Drive com um elemento de vídeo HTML5.

Passo a passo:

1. Verifique se o vídeo está definido como público

Antes de incorporar um vídeo, verifique se o vídeo que deseja incorporar é público e pode ser compartilhado. Além disso, os vídeos devem ter permissão para compartilhar publicamente. Você pode verificar isso clicando com o botão direito do mouse no arquivo de vídeo e selecionando “Compartilhar”.

2. Link ID do Vídeo

Depois que o vídeo estiver definido como público, copie o link para o vídeo. Nesse caso, certifique-se de que o link que termina em “1ZHfqyL4qydKiHhomCxvbPzg9lciCscUl/view” seja copiado, não o link inicial no topo da página.

3. Crie elementos de vídeo

Adicione o seguinte código CSS à sua página da web:

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

Use o código a seguir para exibir um vídeo do Google Drive em sua postagem.

<div class="video-responsive">
<video controls>
<source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</video>
</div>

Substitua o FileID pelo ID da URL de compartilhamento do arquivo do Google Drive. Agora, substitua GoogleDriveAPIkey pela chave de API do Google Drive.

O trecho de código gerado será mais ou menos assim:

Conclusão

Incorporar um vídeo do Google Drive usando o elemento HTML5 Video é uma maneira simples e eficaz de compartilhar seus vídeos com seu público. Com apenas algumas etapas fáceis, você pode enviar e compartilhar seus vídeos no Google Drive e incorporá-los em seu site ou blog. Então, comece a compartilhar seus vídeos hoje e aproveite os benefícios do elemento HTML5 Video!

4.6/5 - (11 votes)