programa-con-google: El poder de Polymer y YouTube desde la comunidad, una nueva entrega experiencia

El poder de Polymer y YouTube desde la comunidad, una nueva entrega experiencia

Thursday, April 23, 2015

YouTube permite personalizar su reproductor de video e integrarlo en nuestras páginas y aplicaciones para crear experiencias con videos interactivos.Es un gran desafío personalizar el reproductor de modo de lograr una experiencia consistente a través de diferentes dispositivos, con distintos tamaños de pantalla, como móviles, TV, laptops y tablets. ¿Como podemos hacerlo?El componente Web del reproductor de YoutubeGracias a Polymer y los componentes de YouTube podemos utilizar y personalizar el reproductor. Podemos configurar sus parámetros, gestionar su estado y sus eventos!
Los parámetros más importantes son el videoid, con el que especificamos el video que queremos ver, la altura y ancho (parámetros height y width), y finalmente un parámetro que permite simular el modo Chromeless (el reproductor sin controles y branding..), de modo de crear nuestros propios controles para reproducir el video.Recreando caso de éxito "Videos interactivos, Knorr Mexico"

Recreemos la experiencia con videos interactivos de Knorr México, utilizando Polymer, Fig.1:

Fig.1

En esta experiencia se logra ocultado los controles estándar del reproductor (utilizando el modo Chromeless), y mostrando en cambio controles personalizados. Además se comienza en forma automática la reproducción de video.

Como lo podemos hacer con el componente web de YouTube? Simple:

Vamos a configurar el componente de YouTube con reproducción automática y sin controles (Chromeless):

<google-youtube

videoid="3T87lMYzqf4"

height="100%"

width="100%"

rel="0"

autoplay="1"

chromeless>

</google-youtube>
Veamos el ejemplo:http://matiasmolinas.github.io/google-youtube/components/google-youtube/demo.html
Puedes hacer un fork del proyecto en Github:https://github.com/matiasmolinas/google-youtube

En el ejemplo solo falta utilizar paper elements para crear nuevos controles de reproducción, algo que es muy recomendado cuando utilizas el modo Chromeless!

En el próximo artículo veremos cómo incorporar este tipo de controles (paper elements), junto con el API de Datos de YouTube, al hacer uso del componente:
google-youtube-video-wall
https://github.com/GoogleWebComponents/google-youtube-video-wall

Hasta la próxima!

Este post ha sido escrito por +Matias Molinas, Google Developer Expert para YouTube API. Editor by +Nicolas Bortolotti

Programa con Google

El poder de Polymer y YouTube desde la comunidad, una nueva entrega experiencia

No comments :

Post a Comment

Labels

Archive

Feed

Company-wide

Products

Developers