Subscribete

Ver articulos del blog

Incrustar tus videos de Google Drive en video HTML5

Cómo incrustar videos de Google Drive con elementos de video HTML5
Cómo incrustar videos de Google Drive con elementos de video HTML5
¿Por qué molestarse en usar elementos de video HTML5? ¿Google Drive ya proporciona un código de inserción de iframe? Tal vez esta pregunta se encuentra en algunos bloggers que a menudo usan Google Drive.

Como todos sabemos, Google Drive ha proporcionado un código de incrustación con un iframe, pero hay algunos que me lo bloquean, especialmente si se usa para incrustar videos. Es decir, tenemos que hacer clic 2 veces para reproducir el video y hay un ícono de enlace para obtener una vista previa del video en Google Drive en la parte superior derecha del reproductor que es suficiente para interferir con la pantalla del reproductor.
Con elementos de video HTML5, podemos hacer que sea más fácil para los reproductores personalizados de videos de Google Drive. Pero para poder usar elementos de video HTML5 para videos de Google Drive, debemos usar la clave API de Google Drive para las fuentes de video.
Cómo crear una clave API de Google Drive
Cómo crear una clave API de Google Drive
Cree una clave de API de Google Drive con los siguientes pasos:
Ingrese a la consola API de Google
Entonces, por favor haga clic en el botón  Crear Proyecto (o elija uno existente)
Una vez que el nuevo proyecto se haya creado correctamente, seleccione la API de Google Drive y luego haga clic en el botón Habilitar .
Luego, haga clic en el botón Crear credenciales .
Para óptica ¿Qué API estás usando? Seleccione el proyecto que creamos anteriormente. Para la opción ¿ Desde dónde llamarás a la API?
Seleccione el servidor web (por ejemplo, node.js, Tomcat) . Luego verifique los Datos del usuario y haga clic en el botón ¿Qué necesito para las credenciales ?
Luego haga clic en el botón Crear ID de cliente OAuth .
Agregue el nombre al nombre del producto, luego haga clic en el botón Continuar y luego en Listo .
Luego, haga clic en el botón azul Crear credenciales en la pestaña Credenciales y luego seleccione la clave API .
Copie el código de clave API proporcionado y anótelo en el bloc de notas.
Hasta aquí, hemos creado con éxito la clave de API de Google Drive , luego siga los siguientes pasos para insertar el video de Google Drive en la publicación.
Y aquí está cómo incrustar videos cargados en Google Drive para que sean receptivos mediante el uso de elementos de video HTML5.

Cómo incrustar videos de Google Drive con elementos de video HTML5

Agregue el siguiente CSS en su estilo de blog. Si anteriormente ha almacenado CSS como este, omita este paso.

.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;
}
Y use el siguiente código para mostrar videos de Google Drive en la publicación.

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

Reemplace el ID de archivo con el código de la URL para compartir archivos de Google Drive como en el siguiente ejemplo que marqué y asegúrese de que el archivo sea Público en la web .
https://drive.google.com/file/d/ 0Bz4YdwRI3rnCYkdjamNpTEs5bz / view? usp = sharing
Luego, al escribir GoogleDriveAPIkey , reemplácelo con la clave API de Google Drive que se creó.
Reemplace el ID de archivo con el código de la URL para compartir archivos de Google Drive como en el siguiente ejemplo que marqué y asegúrese de que el archivo sea Público en la web .
Luego, al escribir GoogleDriveAPIkey , reemplácelo con la clave API de Google Drive que se creó.
Ese es el consejo que puedo compartir esta vez sobre cómo incrustar videos de Google Drive con elementos de video HTML5 . Esperemos que este tutorial pueda ser útil para usted y buena suerte.
Etiquetas: