Diferencia entre revisiones de «Usuario:Juanda/videohtml5/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Imágenes)
 
(27 revisiones intermedias por el mismo usuario no mostrado)
Línea 5: Línea 5:
  
 
<div class="slide">
 
<div class="slide">
−
==Imágenes==
+
=Imágenes=
 
</div>
 
</div>
 +
<div class="slide">
 +
====Introducción====
 +
*Las imágenes un elemento clave para una web bien diseñada
 +
*[http://www.sitebuilderreport.com/blog/where-the-best-designers-go-to-find-photos-and-graphics Las páginas web atractivas se encuentran], no se hacen:
 +
:Búsqueda de imágenes
 +
:Búsqueda de iconos
 +
:Búsqueda de patterns
 +
:....
  
 +
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 +
</div>
  
 
<div class="slide">
 
<div class="slide">
−
==Logotipos y diseño==
+
====Logotipos y diseño====
−
*Son un elemento clave para una web bien diseñada
+
*El diseño es clave para una web
 +
*¿Dónde encontrar buenos diseñadores?
 +
*¿Dónde darse a conocer como diseñador?
 
:[http://dribbble.com/ Dribble]: recursos diseñadores
 
:[http://dribbble.com/ Dribble]: recursos diseñadores
 
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
 
:[http://www.behance.net/ Behance], portfolios online de diseñadores en la nube de Adobe.
Línea 18: Línea 30:
  
 
<div class="slide">
 
<div class="slide">
−
== Bancos de fotografías==
+
==== Bancos de fotografías====
 
*Algunos clásicos y más caros, por ejemplo [http://www.corbisimages.com/ Corbis]
 
*Algunos clásicos y más caros, por ejemplo [http://www.corbisimages.com/ Corbis]
 
*Otros, los llamados microstocks más amateur pero con precios más reducidos:
 
*Otros, los llamados microstocks más amateur pero con precios más reducidos:
Línea 25: Línea 37:
 
: http://www.fotolia.com
 
: http://www.fotolia.com
 
: http://www.bigstockphoto.com/
 
: http://www.bigstockphoto.com/
 +
: http://www.sxc.hu/ (gratuito)
 +
 +
</div>
 +
<div class="slide">
 
*La elección de imágenes puede llevar mucho tiempo y es vital para el aspecto final de nuestra web.
 
*La elección de imágenes puede llevar mucho tiempo y es vital para el aspecto final de nuestra web.
 
*Ejemplos de imágenes para webs de accidentes de tráfico:
 
*Ejemplos de imágenes para webs de accidentes de tráfico:
Línea 31: Línea 47:
 
:http://www.marianosanchez.com/
 
:http://www.marianosanchez.com/
 
*¿Qué tipo de imágenes utilizarías tu?
 
*¿Qué tipo de imágenes utilizarías tu?
 +
*Una web bien diseñada se apoya en imágenes, ver [http://www.awwwards.com/ ejemplos de webs]
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
==Optimización de imágenes==
+
 
 +
====Optimización de imágenes====
 
*Podemos utilizar PageSpeed de Google
 
*Podemos utilizar PageSpeed de Google
 
*Podemos instalar algún software como [http://trimage.org/ trimage]:
 
*Podemos instalar algún software como [http://trimage.org/ trimage]:
Línea 42: Línea 60:
 
</div>
 
</div>
  
 +
<div class="slide">
 +
====Retocar imágenes====
 +
*En ocasiones es bueno retocar las imágenes:
 +
:Brillo, contraste, reducción de ruido
 +
:Recortar la imagen para centrar la atención en una parte de ella.
 +
:Alinear horizonte, ojos rojos....
 +
*Utilizaremos programas como photoshop o gimp.
 +
</div>
  
  
 
<div class="slide">
 
<div class="slide">
−
==Imágenes en dispositivos==
+
====Tipos de imágenes====
 +
*Imágenes de mapa de bits:
 +
:Están formadas por un conjunto de puntos (píxeles) contenidos en una tabla.
 +
:Cada uno de estos puntos tiene un valor o más que describe su color.
 +
:Se modifican mediante Gimp o Photoshop
 +
*Imágenes vectoriales:
 +
:Representaciones de entidades geométricas tales como círculos, rectángulos o segmentos.
 +
:Están representadas por fórmulas matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un radio...)
 +
:Se modifican mediante Inkscape o CorelDraw
 +
</div>
 +
<div class="slide">
 +
*Las imágenes de mapas de bits se pixelan.
 +
*Las imágenes vectoriales son más simples, aunque la superposición de formas simples pueden producir resultados impresionantes.
 +
*Las fotografías serán siempre mapas de bits
 +
*Las imágenes vectoriales se introducen en html5 por medio del formato svg (hasta ahora mediante Flash).
 +
 
 +
</div>
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
====Imágenes en dispositivos====
 
*Útil para dar un aspecto más moderno y tecnológico
 
*Ú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
 
*Muy usado en programas de software, mostrando por ejemplo una aplicación dentro de un ipad
Línea 56: Línea 103:
 
: http://goo.gl/aLuT6e  
 
: http://goo.gl/aLuT6e  
 
</div>
 
</div>
−
 
−
 
  
  
 
<div class="slide">
 
<div class="slide">
−
==Tratamiento de imágenes desde consola==
+
====Tratamiento de imágenes desde consola====
 
*Instalaremos el [http://www.imagemagick.org/ paquete imagemagick] para tratar las imágenes:
 
*Instalaremos el [http://www.imagemagick.org/ paquete imagemagick] para tratar las imágenes:
 
<source lang="bash">
 
<source lang="bash">
Línea 70: Línea 115:
 
$ convert rose.jpg rose.png
 
$ convert rose.jpg rose.png
 
</source>
 
</source>
 +
</div>
 +
 +
<div class="slide">
 
*Especificar el nivel de compresión para imágenes jpg (de 0 a 100, por defecto 92):
 
*Especificar el nivel de compresión para imágenes jpg (de 0 a 100, por defecto 92):
 
<source lang="bash">
 
<source lang="bash">
 
convert howtogeek.png -quality 95 howtogeek.jpg
 
convert howtogeek.png -quality 95 howtogeek.jpg
 
</source>
 
</source>
 +
</div>
 +
 +
<div class="slide">
 
*Cambiar el tamaño de las imágenes:
 
*Cambiar el tamaño de las imágenes:
 
: En este caso se sobreescribe la imagen original
 
: En este caso se sobreescribe la imagen original
Línea 80: Línea 131:
 
convert example.png -resize 200×100 example.png
 
convert example.png -resize 200×100 example.png
 
</source>
 
</source>
 +
</div>
 +
 +
<div class="slide">
 
:En este caso la imagen no guardará la proporción (por la exclamación):
 
:En este caso la imagen no guardará la proporción (por la exclamación):
 
<source lang="bash">
 
<source lang="bash">
Línea 88: Línea 142:
 
convert example.png -resize 200 example.png
 
convert example.png -resize 200 example.png
 
</source>
 
</source>
 +
</div>
 +
 +
<div class="slide">
 
:Alto 100, ancho según proporciones de la imagen:
 
:Alto 100, ancho según proporciones de la imagen:
 
<source lang="bash">
 
<source lang="bash">
 
convert example.png -resize x100 example.png
 
convert example.png -resize x100 example.png
 
</source>
 
</source>
 +
</div>
 +
 +
<div class="slide">
 
*Procesos en batch:
 
*Procesos en batch:
 
:En este caso rotamos todas las imágenes de tipo png del directorio actual 90º y las guardamos con el prefijo "rotated"
 
:En este caso rotamos todas las imágenes de tipo png del directorio actual 90º y las guardamos con el prefijo "rotated"
Línea 103: Línea 163:
  
 
<div class="slide">
 
<div class="slide">
−
==Video en html5==
+
 
 +
=Video en html5=
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Añadir video en navegadores actuales===
+
====Añadir video en navegadores actuales====
 
*Antes de html5 no había ningún estándar para el video.
 
*Antes de html5 no había ningún estándar para el video.
 
*Se recurría a plugins como QuickTime, RealPlayer o Flash.
 
*Se recurría a plugins como QuickTime, RealPlayer o Flash.
Línea 116: Línea 177:
 
</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.
 +
</div>
 +
 +
<div class="slide">
 +
 
*Desgraciadamente la etiqueta <video> no funciona en todos los navegadores:
 
*Desgraciadamente la etiqueta <video> no funciona en todos los navegadores:
 
<pre>
 
<pre>
Línea 124: Línea 189:
  
  
 +
<div class="slide">
  
−
 
+
====Formatos de video====
−
<div class="slide">
+
−
===Formatos de video===
+
 
*Se pueden indicar varios sources por si el navegador no es capaz de reproducir uno de ellos
 
*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....
 
*El navegador lo intentará con el primero, luego con el segundo....
Línea 146: Línea 210:
 
</source>
 
</source>
 
</div>
 
</div>
−
 
−
 
  
 
<div class="slide">
 
<div class="slide">
Línea 163: Línea 225:
  
 
<div class="slide">
 
<div class="slide">
−
=== Video Containers ===
+
==== Video Containers ====
 
*Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
 
*Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
 
*Un fichero contenedor es como un fichero .zip y en el caso del video contiene un stream de video y otro de audio.
 
*Un fichero contenedor es como un fichero .zip y en el caso del video contiene un stream de video y otro de audio.
Línea 173: Línea 235:
  
 
<div class="slide">
 
<div class="slide">
−
===Video Codecs===
+
====Video Codecs====
 
*Los streams de video y audio se codifican y se almacenan en un container.
 
*Los streams de video y audio se codifican y se almacenan en un container.
 
*A la hora de reproducirlos, primero el reproductor debe interpretar el formato del container y luego decodificar el video y el audio
 
*A la hora de reproducirlos, primero el reproductor debe interpretar el formato del container y luego decodificar el video y el audio
Línea 182: Línea 244:
  
 
<div class="slide">
 
<div class="slide">
−
====H264====
+
=====H264=====
 
*También se conoce como MPEG-4 Advanced Video Coding.
 
*También se conoce como MPEG-4 Advanced Video Coding.
 
*Tiene diferentes perfiles de codificación en función de la calidad del video final generado: Baseline, Main y High profiles
 
*Tiene diferentes perfiles de codificación en función de la calidad del video final generado: Baseline, Main y High profiles
Línea 191: Línea 253:
  
 
<div class="slide">
 
<div class="slide">
−
====THEORA====
+
=====THEORA=====
 
*Sin ningún tipo de patentes
 
*Sin ningún tipo de patentes
 
*En cualquier container, normalmente en ficheros .ogg
 
*En cualquier container, normalmente en ficheros .ogg
Línea 197: Línea 259:
  
 
<div class="slide">
 
<div class="slide">
−
====VP8====
+
=====VP8=====
 
*Comprado por Google y liberada la patente.
 
*Comprado por Google y liberada la patente.
 
</div>
 
</div>
  
 +
<div class="slide">
 +
=Audio=
 +
</div>
  
−
 
 
<div class="slide">
 
<div class="slide">
−
===Audio Codecs===
+
====Voces de Audio====
 +
*Pueden ser caras:
 +
:250€ por 5 minutos de voz.
 +
:El equipo de audio no lo pones tu :-)
 +
:[http://www.youtube.com/watch?v=07wVo1hnmdQ ¿Te suena?]
 +
*[http://www.voices.com/ Elegir una voz]
 +
</div>
 +
<div class="slide">
 +
====Audio Codecs====
 
*Como los codecs de video existen con o sin pérdida
 
*Como los codecs de video existen con o sin pérdida
 
*Como en los de video, para la web nos interesan los que tienen perdida (pero a su vez menor peso)
 
*Como en los de video, para la web nos interesan los que tienen perdida (pero a su vez menor peso)
 
*Nos centraremos en los codecs generales (hay específicos por ejemplo para telefonía).
 
*Nos centraremos en los codecs generales (hay específicos por ejemplo para telefonía).
 
*Al descodificar el audio mandamos los datos del stream de audio a los altavoces
 
*Al descodificar el audio mandamos los datos del stream de audio a los altavoces
 +
</div>
 +
 +
<div class="slide">
 
*Los audios tienen canales (los videos no): cada altavoz se alimenta de un channel del stream de audio.
 
*Los audios tienen canales (los videos no): cada altavoz se alimenta de un channel del stream de audio.
 
*Los codecs de propósito general codifican normalmente 2 canales.
 
*Los codecs de propósito general codifican normalmente 2 canales.
Línea 214: Línea 289:
 
</div>
 
</div>
  
 +
<div class="slide">
 +
=====MP3=====
 +
*Formalmente llamado MPEG-1 Audio Layer 3
 +
*Hasta 2 canales de sonido
 +
*Distintos bitrates 64kbps, 128kbps, 192kbps
 +
*A mayor bitrate el fichero será más pesado y tendrá más calidad de audio
 +
</div>
  
 
<div class="slide">
 
<div class="slide">
 +
*El bitrate y la calidad de audio no tienen una relación lineal:
 +
:128kbps se oye con más del doble de calidad que 64kbps
 +
:256k no se oye con el doble de calidad que 128kbps
 +
*Podemos codificar con un bitrate constante o variable (por ej. codificando a un bitrate bajo los silencios de audio).
 +
*Tiene patentes, por eso Linux no lo reproduce por defecto.
 +
</div>
  
−
*Te recomomiendo la lectura del [http://diveintohtml5.info/video.html capitulo de video] de diveintohtml5.
+
<div class="slide">
 +
=====AAC=====
 +
*Formalmente llamado Advanced Audio Coding
 +
*Hasta 64 canales de sonido
 +
*Estandarizado por Apple en 1997. Lo utilizo como formato por defecto para su iTunes Store.
 +
*Diseñado para dar mayor calidad de audio que MP3 al mismo bitrate
 +
*Sin límite de bitrate (MP3 lo tiene en 320kbps)
 +
*La librería libre para codificar en AAC se llama FAAC.
 +
*Usa profiles, de forma similar a MP4.
 +
</div>
  
−
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari]. También en Google Chrome.
+
<div class="slide">
 +
=====VORBIS=====
 +
*Denominado a veces OGG-VORBIS pero OGG es el container
 +
*Suele ir embebido en ficheros ogg o webm pero también puede ir en mp4, mkv
 +
*Soporta un gran número de canales de sonido
 +
</div>
 +
 
 +
<div class="slide">
 +
 
 +
=¿Qué funciona en la Web?=
 +
</div>
 +
<div class="slide">
 +
====Formatos para la web====
 +
*Utilizaremos formato WebM y mp4. [https://developer.mozilla.org/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 Ver detalles]
 +
*El formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis.
 +
*Ogg en principio podría ser prescindible. WebM da mejor relación calidad-compresión.
 +
<pre>
 +
VIDEO CODEC SUPPORT IN SHIPPING BROWSERS
 +
CODECS/CONTAINER IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
 +
Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · ·
 +
H.264+AAC+MP4       9.0+ · 3.0+ 5.0+‡ · 3.0+ 2.0+
 +
WebM               9.0+* 4.0+ † 6.0+ 10.6+ · 2.3+
 +
* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”.
 +
† Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.
 +
‡ Google Chrome promised to drop support for H.264 in 2011, but it never happened.
 +
</pre>
 +
 
 +
</div>
 +
 
 +
<div class="slide">
 +
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari].  
 
*WebM: [http://caniuse.com/#feat=webm Opera, Firefox y Google Chrome]
 
*WebM: [http://caniuse.com/#feat=webm Opera, Firefox y Google Chrome]
 
*Ogg: [http://caniuse.com/#feat=ogv Opera, Firefox y Google Chrome]
 
*Ogg: [http://caniuse.com/#feat=ogv Opera, Firefox y Google Chrome]
−
 
 
*[http://www.longtailvideo.com/html5/ Situación actual]
 
*[http://www.longtailvideo.com/html5/ Situación actual]
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 +
====Configuración servidor web====
 +
*El servidor web tiene que tener los mime types configurados para la reproducción de videos en algún navegador
 +
*Será lo que envíe en el header como content-type y que el navegador puede requerir.
 +
*En el servidor web Apache lo haremos en el fichero .htaccess o en el httpd.conf/apache2.conf:
 +
<pre>
 +
AddType video/ogg .ogv
 +
AddType video/mp4 .mp4
 +
AddType video/webm .webm
 +
</pre>
 +
</div>
  
−
===Decodificación de Vídeo===
+
 
 +
 
 +
 
 +
<div class="slide">
 +
 
 +
=Codificación de Vídeo=
 +
</div>
 +
 
 +
<div class="slide">
 
* ¿livav o ffmpeg? [http://blog.pkh.me/p/13-the-ffmpeg-libav-situation.html Ver resumen de problemática]
 
* ¿livav o ffmpeg? [http://blog.pkh.me/p/13-the-ffmpeg-libav-situation.html Ver resumen de problemática]
 
* Por defecto Ubuntu funciona con livav.  
 
* Por defecto Ubuntu funciona con livav.  
Línea 233: Línea 379:
 
*[https://www.virag.si/2012/01/web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con H.264 ]
 
*[https://www.virag.si/2012/01/web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con H.264 ]
 
*[https://www.virag.si/2012/01/webm-web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con WebM y Ogg]  
 
*[https://www.virag.si/2012/01/webm-web-video-encoding-tutorial-with-ffmpeg-0-9/ Codificación con WebM y Ogg]  
 +
*Otra opción para codificar mp4 http://handbrake.fr/
 +
*Otra opción para codificar Ogg-Vorbis: http://v2v.cc/~j/ffmpeg2theora/
 
</div>
 
</div>
−
<div class="slide">
 
  
−
===Video responsivo===
+
<div class="slide">
 +
=Video responsivo=
 +
</div>
 +
<div class="slide">
 +
====css habitual====
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
<source lang="html4strict">
 
<source lang="html4strict">
Línea 242: Línea 393:
 
</source>
 
</source>
 
*Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
 
*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:
+
*En html5 es bueno definir solo la anchura para que el vídeo mantenga su proporción:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
<video width="100%" ....
 
<video width="100%" ....

Última revisión de 11:59 16 ene 2014

Usuario:Juanda/html5video/nav

Imágenes

Introducción

Búsqueda de imágenes
Búsqueda de iconos
Búsqueda de patterns
....
Behance, portfolios online de diseñadores en la nube de Adobe.

Logotipos y diseño

  • El diseño es clave para una web
  • ¿Dónde encontrar buenos diseñadores?
  • ¿Dónde darse a conocer como diseñador?
Dribble: recursos diseñadores
Behance, portfolios online de diseñadores en la nube de Adobe.


Bancos de fotografías

  • Algunos clásicos y más caros, por ejemplo Corbis
  • Otros, los llamados microstocks más amateur pero con precios más reducidos:
http://www.shutterstock.com/
http://www.istockphoto.com/
http://www.fotolia.com
http://www.bigstockphoto.com/
http://www.sxc.hu/ (gratuito)
  • La elección de imágenes puede llevar mucho tiempo y es vital para el aspecto final de nuestra web.
  • Ejemplos de imágenes para webs de accidentes de tráfico:
http://www.solernaharro.com/
http://abogadoaccidentetrafico.es/
http://www.marianosanchez.com/
  • ¿Qué tipo de imágenes utilizarías tu?
  • Una web bien diseñada se apoya en imágenes, ver ejemplos de webs

Optimización de imágenes

  • Podemos utilizar PageSpeed de Google
  • Podemos instalar algún software como trimage: 
sudo apt-get install trimage

Retocar imágenes

  • En ocasiones es bueno retocar las imágenes:
Brillo, contraste, reducción de ruido
Recortar la imagen para centrar la atención en una parte de ella.
Alinear horizonte, ojos rojos....
  • Utilizaremos programas como photoshop o gimp.


Tipos de imágenes

  • Imágenes de mapa de bits:
Están formadas por un conjunto de puntos (píxeles) contenidos en una tabla.
Cada uno de estos puntos tiene un valor o más que describe su color.
Se modifican mediante Gimp o Photoshop
  • Imágenes vectoriales:
Representaciones de entidades geométricas tales como círculos, rectángulos o segmentos.
Están representadas por fórmulas matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un radio...)
Se modifican mediante Inkscape o CorelDraw
  • Las imágenes de mapas de bits se pixelan.
  • Las imágenes vectoriales son más simples, aunque la superposición de formas simples pueden producir resultados impresionantes.
  • Las fotografías serán siempre mapas de bits
  • Las imágenes vectoriales se introducen en html5 por medio del formato svg (hasta ahora mediante Flash).


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:
http://placeit.breezi.com
http://mockuphone.com
http://developer.android.com/distribute/promote/device-art.html
http://aarnis.com/demo.html
http://goo.gl/aLuT6e


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
  • Procesos en batch:
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>


Video Containers

  • Muchas veces pensamos en un fichero .avi o .mp4 como si fuera un video, pero realmente es un formato contenedor.
  • Un fichero contenedor es como un fichero .zip y en el caso del video contiene un stream de video y otro de audio.
  • El fichero contenedor define como almacenar los streams de audio y video en un solo fichero.
  • Aunque no es tan fácil: No todos los streams de video son compatibles con todos los ficheros contenedores.


Video Codecs

  • Los streams de video y audio se codifican y se almacenan en un container.
  • A la hora de reproducirlos, primero el reproductor debe interpretar el formato del container y luego decodificar el video y el audio
  • Cuando hablamos de un codec de video nos referimos tanto un algoritmo de COdificación como al de DECodificación
  • Los codec de video más populares son H264, Theora y VP8.


H264
  • También se conoce como MPEG-4 Advanced Video Coding.
  • Tiene diferentes perfiles de codificación en función de la calidad del video final generado: Baseline, Main y High profiles
  • El H264 está embebido en los containers más populares como mp4 y mkv.
  • Tiene licencia: si codificas algo en mp4 y lo compartes con el mundo, pueden exigirte royalties.


THEORA
  • Sin ningún tipo de patentes
  • En cualquier container, normalmente en ficheros .ogg
VP8
  • Comprado por Google y liberada la patente.

Audio

Voces de Audio

  • Pueden ser caras:
250€ por 5 minutos de voz.
El equipo de audio no lo pones tu :-)
¿Te suena?

Audio Codecs

  • Como los codecs de video existen con o sin pérdida
  • Como en los de video, para la web nos interesan los que tienen perdida (pero a su vez menor peso)
  • Nos centraremos en los codecs generales (hay específicos por ejemplo para telefonía).
  • Al descodificar el audio mandamos los datos del stream de audio a los altavoces
  • Los audios tienen canales (los videos no): cada altavoz se alimenta de un channel del stream de audio.
  • Los codecs de propósito general codifican normalmente 2 canales.
  • En la web se utilizan exlusivamente tres codecs: MP3, AAC y Vorbis.
MP3
  • Formalmente llamado MPEG-1 Audio Layer 3
  • Hasta 2 canales de sonido
  • Distintos bitrates 64kbps, 128kbps, 192kbps
  • A mayor bitrate el fichero será más pesado y tendrá más calidad de audio
  • El bitrate y la calidad de audio no tienen una relación lineal:
128kbps se oye con más del doble de calidad que 64kbps
256k no se oye con el doble de calidad que 128kbps
  • Podemos codificar con un bitrate constante o variable (por ej. codificando a un bitrate bajo los silencios de audio).
  • Tiene patentes, por eso Linux no lo reproduce por defecto.
AAC
  • Formalmente llamado Advanced Audio Coding
  • Hasta 64 canales de sonido
  • Estandarizado por Apple en 1997. Lo utilizo como formato por defecto para su iTunes Store.
  • Diseñado para dar mayor calidad de audio que MP3 al mismo bitrate
  • Sin límite de bitrate (MP3 lo tiene en 320kbps)
  • La librería libre para codificar en AAC se llama FAAC.
  • Usa profiles, de forma similar a MP4.
VORBIS
  • Denominado a veces OGG-VORBIS pero OGG es el container
  • Suele ir embebido en ficheros ogg o webm pero también puede ir en mp4, mkv
  • Soporta un gran número de canales de sonido

¿Qué funciona en la Web?

Formatos para la web

  • Utilizaremos formato WebM y mp4. Ver detalles
  • El formato WebM se basa en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis.
  • Ogg en principio podría ser prescindible. WebM da mejor relación calidad-compresión. 
VIDEO CODEC SUPPORT IN SHIPPING BROWSERS
CODECS/CONTAINER	IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
Theora+Vorbis+Ogg	·	3.5+	†	5.0+	10.5+	·	·
H.264+AAC+MP4	       9.0+	·	3.0+	5.0+‡	·	3.0+	2.0+
WebM	               9.0+*	4.0+	†	6.0+	10.6+	·	2.3+
* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec”.
† Safari will play anything that QuickTime can play. QuickTime comes pre-installed with H.264/AAC/MP4 support. There are installable third-party plugins that add support for Theora and WebM, but each user needs to install these plugins before Safari will recognize those video formats.
‡ Google Chrome promised to drop support for H.264 in 2011, but it never happened.


Configuración servidor web

  • El servidor web tiene que tener los mime types configurados para la reproducción de videos en algún navegador
  • Será lo que envíe en el header como content-type y que el navegador puede requerir.
  • En el servidor web Apache lo haremos en el fichero .htaccess o en el httpd.conf/apache2.conf: 
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm



Codificación de Vídeo

Video responsivo

css habitual

  • 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 vídeo 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&amp;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&amp;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
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/videohtml5/Introducción&oldid=14263»