Imágenes y video HTML5
De WikiEducator
Saltar a: navegación, buscar
Contenido
Imágenes
Logotipos y diseño
- Son un elemento clave para una web bien diseñada
Bancos de foografías
- Algunos clásicos y más caros, por ejemplo Corbis
- Otros, los llamados microstocks más amateur pero con precios más reducidos:
Imágenes en dispositivos
- Útil para dar un aspecto más moderno y tecnológico
- Muy usado en programas de software, mostrando por ejemplo una aplicación dentro de un ipad
- Desde Ubuntu podremos capturar la pantalla o ventana actual
- Hay varios servicios que nos generan nuestra imagen en un dispositivo físico:
Tratamiento de imágenes desde consola
- Instalaremos el paquete imagemagick para tratar las imágenes:
# apt-get install imagemagick
- Cambiar formato de una imagen:
$ convert rose.jpg rose.png- Especificar el nivel de compresión para imágenes jpg (de 0 a 100, por defecto 92):
convert howtogeek.png -quality 95 howtogeek.jpg
- Cambiar el tamaño de las imágenes:
- En este caso se sobreescribe la imagen original
- La imagen intentará guardar la proporción
convert example.png -resize 200×100 example.png
- En este caso la imagen no guardará la proporción (por la exclamación):
convert example.png -resize 200×100! example.png
- Ancho 200, el alto según proporciones de la imagen:
convert example.png -resize 200 example.png
- Alto 100, ancho según proporciones de la imagen:
convert example.png -resize x100 example.png
Video en html5
Introducción
<!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video> </body> </html>
Formatos de Vídeo
- MP4: Principalmente para IE y Safari. También en Google Chrome.
- WebM: Opera, Firefox y Google Chrome
- Ogg: Opera, Firefox y Google Chrome
Decodificación de Vídeo
- ¿livav o ffmpeg? Ver resumen de problemática
- Por defecto Ubuntu funciona con livav.
- Instalación de ffmpeg
- Codificación con H.264
- Codificación con WebM y Ogg
Video responsivo
- Declarar dimensiones "estáticas" no es buena idea:
<video width="400" height="300" ....- Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
- En html5 es bueno definir solo la anchura para que el video mantenga su proporción:
<video width="100%" ....- Mediante css:
video {
width: 100% !important;
height: auto !important;
}Vídeos de youtube, vimeo
Obtención de código
- Código inserción vídeos youtube:
<iframe width="640" height="480" src="http://www.youtube.com/embed/oDlsOyPKUTM" frameborder="0" allowfullscreen></iframe>- Código inserción vídeos vimeo:
<iframe src="http://player.vimeo.com/video/57444237" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>- También se puede usar object y embed para insertar código no html. Por ejemplo youtube con Flash:
<object width="640" height="480"> <param name="movie" value="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&version=3"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&version=3" type="application/x-shockwave-flash" width="640" height="480" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Vídeo responsivo por iframe
- Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
- No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
- Ver solución
