Diseño básico personalizable para video en HTML5

Este artí­culo, traducción de un artí­culo del Adobe Developer Connection muestra cómo utilizar un diseño diseño inicial personalizable para incrustar ví­deos usando la tecnologí­a HTML5 en sus sí­tios web.

Este artí­culo muestra cómo utilizar este diseño diseño inicial personalizable para incrustar ví­deos usando la tecnologí­a HTML5 en sus sí­tios web. Lea la información general acerca del reproductor de HTML5 usado en esta plantilla, previsualize y descargue la plantilla y los archivos relacionados y componentes, y vea un breve ví­deo para aprender cómo se puede personalizar.

  • Descripción: El uso de ví­deo HTML5
  • Vea el video: Uso de la plantilla
  • Pruebe y descargue la plantilla

Descripción: El uso de HTML5 ví­deo.

Una de las caracterí­sticas más esperadas de HTML5 es su soporte para video. Esta etiqueta, le permite especificar diversos parámetros sobre el mismo, luego permite que cada navegador tenga la libertad de manejar el video a su manera. Algunos navegadores pueden usar el soporte de ví­deo que viene dentro del sistema operativo, como es el caso de las tablets, o también el navegador puede incluir controles de reproducción propios para su correspondiente reproducción.

Una opción alternativa es utilizar a un reproductor que sea consistente en todos los navegadores y dispositivos, que use gráficos y CSS para modificar su diseño, y que ofrezca soporte adicional para la reproducción de ví­deos en exploradores más antiguos teniendo en cuenta una opción alternativa basada en Flash. Afortunadamente, Adobe proporciona uno de esos reproductores, y está disponible para Dreamweaver a manera de widget. Para acceder  a este, abra el Explorador de Widget de Adobe y la busque “HTML5 Video Player”.

Ahora si nos basamos en el reproductor de Kaltura, podemos notar que este agrega y configura los archivos HTML, CSS,  y JavaScript necesarios para su página web, proporcionando el estado de arte de un reproductor que funciona en todos los dispositivos compatibles con los estándares, sin dejar a un lado a los navegadores más antiguos y menos compatibles.

Figura 1. El widget reproductor HTML5 agrega y configure los archivos en su página web.

Esta plantilla proporciona un archivo CSS, así­ como una plantilla de ​​Photoshop para ayudarle a personalizar rápidamente sus diseños del reproductor. Si bien esta plantilla proporciona reemplazos para algunas de las etiquetas HTML utilizadas por el reproductor Kaltura, sin duda hay más personalizaciones que se pueden hacer. Sin embargo, Uno de los obstáculos es que se puede “ver” el código HTML generado por el JavaScript. Aquí­ es donde la función Dreamweaver Live Code salva el dí­a.

Figura 2. Dreamweaver Live Code the permite inspeccionar el código HTML generado por JavaScript.

Cuando se ejecuta una página web que inlcuye el reproductor Kaltura, o cualquier página con HTML generado por JavaScript, Dreamweaver proporciona una forma para que usted pueda ver el código que se genera. Esta potente caracterí­stica, conocida como “código en vivo”, le permite ver el DOM modificado (Document Object Model), ya que es manipulado por JavaScript. Con esta información ayudará a proporcionar  las nuevas reglas CSS las cuales se crean con el fin de alterar el estilo y los elementos nuevos de HTML.

Mira el video: Usando un template personalizado.
http://www.adobe.com/devnet/dreamweaver/articles/dw-template-html5video.html#1

Previsualizar y Descargar

Desacarga los archivos HTML, CSS  y de Photoshop relacionados con esta plantilla en los siguientes links:

 Previsualizar en el explorador

Descargar el archivo ZIP

Fuente: Adobe Developer Connection 

3 thoughts on “Diseño básico personalizable para video en HTML5

  1. October 11, 2011

    Comunidad AdobeXpert Reply

    iniciando con experiencias con HTML5 ??http://t.co/G8BDOI7M interesante ejercicio!

  2. October 11, 2011

    Comunidad AdobeXpert Reply

    Diseño personalizable HTML5 http://t.co/G8BDOI7M usando Dreamweaver!

  3. December 12, 2011

    Comunidad AdobeXpert Reply

    Diseño básico personalizable para video en #HTML5 (post en el blog #AdobeXpert por @WhGandalf ): http://t.co/y9viGraZ

Leave a Reply

Your email address will not be published. Required fields are marked *