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

De WikiEducator
Saltar a: navegación, buscar
Línea 18: Línea 18:
  
 
<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 25:
 
: http://www.fotolia.com
 
: http://www.fotolia.com
 
: http://www.bigstockphoto.com/
 
: http://www.bigstockphoto.com/
 +
 +
</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 35: Línea 38:
 
<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 46: Línea 49:
  
 
<div class="slide">
 
<div class="slide">
−
==Imágenes en dispositivos==
+
====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 57: Línea 60:
 
: 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 71: Línea 72:
 
$ 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 81: Línea 88:
 
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 89: Línea 99:
 
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 104: Línea 120:
  
 
<div class="slide">
 
<div class="slide">
−
==Video y audio en html5==
+
=Video y audio en html5=
 
</div>
 
</div>
  
 
<div class="slide">
 
<div class="slide">
−
===Añadir video en navegadores actuales===
+
====Añadir video en navegadores actuales==="
 
</div>
 
</div>
 +
 +
 
<div class="slide">
 
<div class="slide">
 
*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.
Línea 119: Línea 137:
 
</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 125: Línea 147:
 
</pre>
 
</pre>
 
</div>
 
</div>
−
 
−
 
  
  
 
<div class="slide">
 
<div class="slide">
−
===Formatos de video===
+
====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 149: Línea 169:
 
</source>
 
</source>
 
</div>
 
</div>
−
 
−
 
  
 
<div class="slide">
 
<div class="slide">
Línea 166: Línea 184:
  
 
<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 176: Línea 194:
  
 
<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 185: Línea 203:
  
 
<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 194: Línea 212:
  
 
<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 200: Línea 218:
  
 
<div class="slide">
 
<div class="slide">
−
====VP8====
+
=====VP8=====
 
*Comprado por Google y liberada la patente.
 
*Comprado por Google y liberada la patente.
 
</div>
 
</div>
Línea 207: Línea 225:
  
 
<div class="slide">
 
<div class="slide">
−
===Audio Codecs===
+
====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 223: Línea 244:
 
*Distintos bitrates 64kbps, 128kbps, 192kbps  
 
*Distintos bitrates 64kbps, 128kbps, 192kbps  
 
*A mayor bitrate el fichero será más pesado y tendrá más calidad de audio
 
*A mayor bitrate el fichero será más pesado y tendrá más calidad de audio
 +
</div>
 +
 +
<div class="slide">
 
*El bitrate y la calidad de audio no tienen una relación lineal:  
 
*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
 
:128kbps se oye con más del doble de calidad que 64kbps
Línea 263: Línea 287:
 
</pre>
 
</pre>
  
 +
</div>
  
 +
<div class="slide">
 
*MP4: [http://caniuse.com/#feat=mpeg4 Principalmente para IE y Safari].  
 
*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===
+
====Configuración servidor web====
 
*El servidor web tiene que tener los mime types configurados para la reproducción de videos en algún navegador
 
*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.
 
*Será lo que envíe en el header como content-type y que el navegador puede requerir.
Línea 287: Línea 314:
 
<div class="slide">
 
<div class="slide">
  
−
===Decodificación de Vídeo===
+
====Decodificación de Vídeo====
 
* ¿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 298: Línea 325:
 
<div class="slide">
 
<div class="slide">
  
−
===Video responsivo===
+
====Video responsivo====
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
<source lang="html4strict">
 
<source lang="html4strict">

Revisión de 12:31 15 ene 2014

Usuario:Juanda/html5video/nav

Imágenes


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.


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/
  • 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?

Optimización de imágenes

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


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 y audio 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 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?

  • Utilizaremos WebM y mp4.
  • Ogg en principio podría ser prescindible. 
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



Decodificación de Vídeo

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&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=14242»