Busindre

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== Servir vídeos locales vía web con un reproductor html5 en minutos (video-js) =====

Video.js es un reproductor de vídeo html5 para usarlo en páginas web. Es compatible con HTML 5, Flash y YouTube o Vimeo a través de plugins. Funciona también correctamente en dispositivos móviles. Se va a mostrar a continuación como servir un vídeo mp4 o webm a través del puerto 8000 teniendo todo en local, es decir, sin necesidad de conectar a Internet para servir o reproducir videos.

Para servir contenido de vídeo en html se recomienda el uso del formato WebM, formato multimedia abierto y libre desarrollado por Google y orientado a usarse con HTML5. Es un proyecto de software libre, bajo una licencia permisiva similar a la licencia BSD. Está compuesto por el códec de vídeo VP8 (desarrollado originalmente por On2 Technologies) o VP9 (recomendado) y el códec de audio Vorbis dentro de un contenedor multimedia Matroska. Si se quiere usar el formato mp4, este debe usar el codec de vídeo H.264 y para el audio AAC-LC (mp4a).

Si realmente se tienen los vídeos en alguno de estos formatos, si estos son solicitados de manera directa por un navegador web, probablemente los reproducirá sin mayor problema. Para incrustarlos en páginas web suele bastar con el uso de la siguiente etiqueta.
<code html>
<video src="video.webm" controls></video>
</code>

Si se desea brindar un reproductor en html5 con más funcionalidades (subtítulos por ejemplo) y posibilidad de personalizarlo al gusto, podemos hacer uso de video-js, aunque hay muchos otros [[http://html5video.org/wiki/HTML5_Video_Player_Comparison|reproductores html5]] disponibles.


  * **Web del proyecto**: [[http://videojs.com/]]
  * **Descargas**: [[https://github.com/videojs/video.js/releases]]
  * **Formato para los vídeos**: mp4 (h264/acc MP4), webm (VP8 o VP9 / Vorbis), ogg y mkv (por ahora solo chrome con type='video/webm')


Descargar el fichero .zip de la última versión y descomprimirlo en una carpeta.
<code bash>mkdir webvideos
cd webvideos/
unzip ../video-js-v5.12.2.zip</code>

Crear el fichero index.html dentro para utilizar el archivo de vídeo "fichero.mp4".
<code html>
<head>
  <link href="video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="ie8/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"  poster="test.jpg" data-setup="{}">
    <source src="fichero.mp4" type='video/mp4'>
<!--    <source src="fichero.webm" type='video/webm'> -->
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="video.js"></script>
</body>
</code>

NOTA: Se pueden incluir múltiples archivos para que el navegador elija el que más le convenga, por norma se ofertan casi siempre el mp4 y webm.

Ahora se puede trasladar la carpeta webvideos o su contenido a cualquier servidor web o arrancar simplemente uno con la terminal ([[servidor_web_por_linea_de_comandos|Leer]]).
<code bash>python3 -m http.server 8000</code>

**URL**: http://localhost:8000

**Transformar videos a mp4 (h264/acc MP4) y a webm (recomendado para html5)con ffmpeg**.

  * **Contenedor MP4 para html5**: Vídeo //avc1.42E01E// (avc1 indica H.264) Audio: //mp4a.40.2// (mp4a.40.2 indica AAAC LC).
  * **Contenedor WebM**: Vídeo: //VP8// o //VP9// Audio: //Vorbis//.

<code bash># MP4.
ffmpeg -i video.xx -threads 1 -c:v libx264 -c:a aac -preset slow video.mp4

# WEBM (VP8): https://trac.ffmpeg.org/wiki/Encode/VP8
ffmpeg -i video.xx -threads 1 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis video.webm

# WEBM (VP9): https://trac.ffmpeg.org/wiki/Encode/VP9 / http://wiki.webmproject.org/ffmpeg/vp9-encoding-guide
ffmpeg -i video.xx -threads 1 -c:v libvpx-vp9 -crf 10 -b:v 0 -c:a libvorbis video.webm

# NOTA: Adaptar el parámetro "-threads" con el número de CPUs -1.
</code>

Algunos contenedores, como los mov pueden ser compatibles en codecs y solo haría falta cambiar de contenedor sin recodificar.
<code bash>ffmpeg -i video.mov -vcodec copy -acodec cop video.mp4</code>

NOTA: Con "ffprobe" o simplemente "ffmpeg -i fichero.xx" se puede obtener información sobre los codecs usados por un determinado fichero (contenedor). Es bueno comprobar siempre que el fichero mp4 contiene los "streams" en la codificación compatible antes de usarlo en el reproductor html5.

  * **Comparativa de reproductores HTML5**: [[http://html5video.org/wiki/HTML5_Video_Player_Comparison]]
  * **Conceptos básicos sobre vídeo en html5**: [[http://www.html5rocks.com/en/tutorials/video/basics/]]