Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Dreamweaver CC 2017 esencial

Usar vídeo HTML5 con Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
El aumento del ancho de banda disponible ha hecho que el uso de vídeo sea habitual, y para usar vídeo lo ideal es el uso de las etiquetas de HTML de vídeo. En este tutorial aprenderemos a usar vídeo HTML5 con Dreamweaver.

Transcripción

Vamos ahora a explicar como añadir vídeo a nuestro HTML. Antes de continuar tengo que explicar un pequeño concepto. El vídeo, para que no pese demasiado tiene que ir comprimido, y hay varios formatos de compresión. Eso hace que haya varias extensiones distintas para los archivos de vídeo. El problema que vamos a tener con ello, es que no hay un solo formato de vídeo que sea compatible en todos los dispositivos y navegadores. Con lo cual, es necesario utilizar al menos dos formatos distintos de vídeo para que si un navegador no es capaz de leer uno, sea capaz de leer el otro. En mi ejemplo, en la carpeta Assets, tengo un vídeo que está en formato .mp4, necesito convertirlo a otra cosa, y de hecho, la otra cosa ideal es el formato .ogg, la combinación de un archivo .mp4 con un .ogg va a poderse ver en cualquier navegador en cualquier dispositivo. Puedo utilizar programas cualquiera para hacer esa conversión de vídeo, por ejemplo, podría utilizar perfectamente el encoder de Adobe. Pero por hacerlo lo más simple posible, voy a utilizar cualquier conversor online, en concreto, a mi me gusta este "onlineconvert.com/es" y dentro de él voy a seleccionar el formato al que quiero que me convierta el vídeo. Una vez hecho esto, selecciono el archivo donde lo tengo guardado que es dentro de la carpeta Assets, y voy a dejar todas las características según vienen, aunque podría cambiarle el tamaño, etcétera. Pulso en convertir, va a tardar unos instantes y me va a descargar este archivo ya convertido al formato .ogg, aquí lo tengo. Ahora lo que necesito es copiar este archivo y pegarlo dentro de la carpeta de trabajo. O sea, aquí dentro de assets, Edición y podría hacer ese Pegar, pero se ve que no lo he copiado bien, así que no pasa nada, lo puedo copiar directamente desde el explorador de archivos y pegarlo dentro del sitio, no hay ningún problema. Voy a quitarle ese paréntesis, y lo tendría listo. Tengo los dos formatos, .ogg y .mp4. Y ahora, voy a añadir el vídeo, dentro de mi página, me voy a insertar, selecciono HTML5 de vídeo, y aquí me añade ya un reproductor de vídeo. En el panel de propiedades tengo las distintas opciones. En principio un identificador, clases que pueda asociar, el tamaño al que tiene que venir el vídeo, puedo forzar un tamaño concreto, o si no pongo nada, se verá el vídeo al mismo tamaño en que ha sido grabado, puedo elegir el origen de ese vídeo, de hecho puedo utilizar el selector de carpetas o también seleccionar el punto de mira, y seleccionar con él... sobre este archivo .mp4. Aquí vemos como me ha cambiado el tamaño de ese vídeo, adaptándolo al tamaño real que tiene ese vídeo. En Poster puedo añadir una imagen que sirva para ver una imagen en caso de que no se pueda reproducir el vídeo. Aquí debería crear una imagen que ponga, por ejemplo, "Tu navegador no puede ver este vídeo". Por supuesto tiene título y texto adicional para accesibilidad, para que se pueda leer. Y luego, muy interesante, en la parte de abajo tengo el origen alternativo. Tengo el primero vídeo que es este y él solo ha detectado otro archivo con el mismo nombre pero con otro formato. Aquí tenemos ese .ogv. Puedo configurar los controles de ese vídeo, entonces puedo hacer que aparezcan o no. Deseleccionando este check, puedo hacer que no haya controles o que los tenga. Puedo hacer que cuando termine vuelva a empezar desde el principio o que no lo haga. Que empiece funcinando automáticamente o que tenga que hacer clic para ponerlo en marcha. O que tenga sonido o que aparezca sin sonido. Y por último, también puedo hacer que haga una precarga de este vídeo. Si me voy a la vista de código, veremos que es muy interesante también como es la estructura de etiquetas de HTML5. Básicamente consiste en una etiquta de vídeo en la que podemos definir diferentes opciones, por ejemplo el autoplay del que hablaba antes, que como vemos es simplemente añadir un atributo autoplay y luego dentro de esta etiqueta, tengo diferentes etiquetas Source, que tienen un atributo SRC, que es de donde va a sacar el vídeo, y luego tiene un tipo, que es donde se define el tipo de vídeo, .mp4, o en este caso .ogg. Guardando este documento, y yéndome al Chrome, a la visualización en tiempo real, pues aquí vemos como efectivamente me ha añadido este vídeo y además como tengo los controles necesarios, precisamente los que había configurado dentro de Dreamweaver.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.