|
|
| Línea 102: |
Línea 102: |
| | <div class="slide"> | | <div class="slide"> |
| | ===Añadir video en navegadores actuales=== | | ===Añadir video en navegadores actuales=== |
| − | *Es tan sencillo como añadir la etiqueta <video>: | + | *Antes de html5 no había ningún estándar para el video. |
| | + | *Se recurría a plugins como QuickTime, RealPlayer o Flash. |
| | + | *Ahora es tan sencillo como añadir la etiqueta <video>: |
| | <source lang="html4strict"> | | <source lang="html4strict"> |
| | <video src="video.webm" controls> | | <video src="video.webm" controls> |
| Línea 108: |
Línea 110: |
| | </source> | | </source> |
| | *El navegador mostrará los controles básicos para reproducir o pausar el video. | | *El navegador mostrará los controles básicos para reproducir o pausar el video. |
| | + | *Desgraciadamente la etiqueta <video> no funciona en todos los navegadores: |
| | + | <pre> |
| | + | IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID |
| | + | 9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+ |
| | + | </pre> |
| | </div> | | </div> |
| | | | |
Revisión de 06:20 15 ene 2014
Usuario:Juanda/html5video/nav
Logotipos y diseño
- Son un elemento clave para una web bien diseñada
- Dribble: recursos diseñadores
- Behance, portfolios online de diseñadores en la nube de Adobe.
Optimización de imágenes
- Podemos utilizar PageSpeed de Google
- Podemos instalar algún software como trimage:
sudo apt-get install trimage
Tratamiento de imágenes desde consola
# 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
- En este caso rotamos todas las imágenes de tipo png del directorio actual 90º y las guardamos con el prefijo "rotated"
for file in *.png; do convert $file -rotate 90 rotated-$file; done
- También podremos realizar efectos.
- Para más información, ejecutamos "man convert"
Video en html5
Añadir video en navegadores actuales
- Antes de html5 no había ningún estándar para el video.
- Se recurría a plugins como QuickTime, RealPlayer o Flash.
- Ahora es tan sencillo como añadir la etiqueta <video>:
<video src="video.webm" controls>
</video>
- El navegador mostrará los controles básicos para reproducir o pausar el video.
- Desgraciadamente la etiqueta <video> no funciona en todos los navegadores:
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
Formatos de video
- Se pueden indicar varios sources por si el navegador no es capaz de reproducir uno de ellos
- El navegador lo intentará con el primero, luego con el segundo....
<!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>
- Si indicamos el type en el video mejoraremos el rendimiento ya que el navegador sabe si puede reproducir ese video o no sin tener que intentarlo:
<video controls>
<source src="devstories.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="devstories.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
Formatos de Vídeo y codecs
- Un fichero de video es como un contenedor (igual que un fichero zip)
- El fichero de video contiene un stream de video y otro de audio.
- Te recomomiento la lectura del capitulo de video de diveintohtml5.
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% !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
