Busindre

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.

<video src="video.webm" controls></video>

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 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.

mkdir webvideos
cd webvideos/
unzip ../video-js-v5.12.2.zip

Crear el fichero index.html dentro para utilizar el archivo de vídeo “fichero.mp4”.

<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>

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 (Leer).

python3 -m http.server 8000

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.

# 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.

Algunos contenedores, como los mov pueden ser compatibles en codecs y solo haría falta cambiar de contenedor sin recodificar.

ffmpeg -i video.mov -vcodec copy -acodec cop video.mp4

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/