El poder de Polymer y YouTube desde la comunidad, una nueva entrega experiencia
jueves, 23 de abril de 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?
Veamos el ejemplo:
http://matiasmolinas.github.io/google-youtube/components/google-youtube/demo.html
Puedes hacer un fork del proyecto en Github:
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 Youtube
Gracias 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>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
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