Videos y Firefox OS

22 enero, 2015 3:04 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Antes de HTML5

Esos fueron tiempos oscuros, Harry, tiempos oscuros – Rubeus Hagrid

Antes de HTML5, mostrar video en la Web requería de complementos del navegador y Flash.

Afortunadamente, Firefox OS soporta video en HTML5 así que no necesitamos soportar esos formatos antiguos.

Soporte de video en la Web

Aunque los navegadores modernos soportan HTML5, los formatos de video que ellos soportan varían:

En  resumen, para soportar la mayoría de navegadores con los pocos formatos necesitas los formatos de video MP4 y WebM (Firefox prefiere WebM).

Múltiples tamaños

Ahora que has visto qué formatos puedes usar, necesitas decidir sobre las resoluciones de video. Como usuarios de escritorio en alta velocidad de Wifi esperamos videos de mejor calidad que los usuarios móviles en 3G.

En Rormix decidimos en 720p para escritorio, 360p para conexiones móviles, y 180p especialmente para Firefox OS para reducir el costo en países con altos cargos de datos.

No hay reglas bien definidas – esto depende de quiénes son tu audiencia de mercado.

¿Streaming?

La mejor solución streaming puede ser servir automáticamente a los diferentes tamaños de los usuarios dependiendo de su estado de conexión (streaming adaptativo) pero el soporte para esta tecnología es pobre.

El streaming en vivo de HTTP funciona bien en dispositivos Apple, pero tiene un pobre soporte en Android.

Al mismo tiempo de escribir, la tecnología más prometedora es MPEG DASH, que un estándar internacional.

En resumen, vamos a tener que esperar antes de obtener una tecnología de streaming adaptativo que sea ampliamente aceptada (Firefox no soporta HLS or MPEG DASH).

Haz tu mismo el streaming adaptativo

En la ausencia del streaming adaptativo, necesitamos tratar de determinar la mejor calidad de video para cargar al inicio. La siguiente es una guía rápida para ayudarte a decidir:

Wifi o 3G

Usando una aplicación certificada de Firefox OS, puedes verificar si el usuario está usando Wifi o no.

var lock = navigator.mozSettings.createLock();
var setting = lock.get('wifi.enabled');

setting.onsuccess = function () {
    console.log('wifi.enabled: ' + setting.result);
}

setting.onerror = function () {
    console.warn('Ocurrió un error: ' + setting.error);
}

https://developer.mozilla.org/en-US/docs/Web/API/Settings_API

Hay algo más de información en la API de dispositivo de la W3C.

Detectando el tamaño de la pantalla

No hay una razón para enviar un video a 720p a un usuario con una pantalla más pequeña a 720p. Hay muchas maneras para obtener los diferentes límites de una pantalla de usuario; innerWidth y width te permiten tener una buena idea:

function getVidSize()
{
    // Obtener el ancho del teléfono (independiente de la rotación)
    var min = Math.min($(window).innerHeight(),$(window).innerWidth());
    //Devolver el tamaño de pantalla que tenemos
    if(min < 320)       return '180';
    else if(min < 550)  return '360';
    else                return '720';
}

http://www.quirksmode.org/m/tests/widthtest.html

Determinando la velocidad de Internet

Es difícil obtener una lectura exacta de la velocidad de Internet de un usuario usando tecnologías Web – usualmente esto involucra cargar una gran imagen dentro del dispositivo del usuario y contar el tiempo. Esto tiene la desventaja de tener que enviar más data al usuario. Algunos servicios como: http://speedof.me/api.html existen, pero requiere descargar datos al dispositivo del usuario. (Stackoverflow tiene algunas más opciones).

Puedes ser un poco más inteligente usando HTML5, y verificar el tiempo que toma entre que el usuario inicia el video y la cantidad determinada de carga del video. De esta manera puede que no necesitemos cargar datos adicionales en el dispositivo del usuario. Un ejemplo de VideoJS rápido es el siguiente:

var global_speedcount = 0;
var global_video = null;
global_video = videojs("video", {}, function(){
    //Configurar las fuentes del video
});

global_video.on('play',function(){
    //El usuario hizo clic en reproducir
    global_speedcount = new Date().getTime();
});

function timer()
{
    var diff = new Date().getTime() - global_speedcount;
    //¡Remover este manejador ya que se ejecuta varias veces por segundo!
    global_video.off('timeupdate',timer);
}

global_video.on('timeupdate',timer);

Este código empieza contando el tiempo cuando el usuario inicia la reproducción, y cuando el navegador empieza a reproducir el video envía la información del tiempo a timeupdate. También puedes usar esta función para detectar si se está realizando mucho buffering (almacenamiento temporal).

Detectar dispositivos de alta resolución

Una cosa más para determinar es si un usuario tiene una pantalla de densidad de pixel alta o no. En este caso incluso si tienen una pantalla pequeña, pueden todavía tener un gran número de píxeles (y por lo tanto requiere una resolución de video más alta).

Modernizr tiene un plugin para detectar pantallas de alta resolución.

if (Modernizr.highresdisplay)
{
    alert('Tu dispositivo tiene una pantalla de alta resolución');
}

Vistas previas de WebP

No queremos enredarnos en una discusión, pero en Rormix  hemos visto un promedio de 30% en reducción de tamaño de archivo (WebP vs JPEG) sin pérdida de calidad (en algunos casos hasta casi 50%). Y en países con planes de datos caros, menos datos es mejor.

Nosotros codificamos todas nuestras vistas previas en múltiples resoluciones de WebP y las enviamos a cada dispositivo que las soporte para reducir la cantidad de datos que está siendo enviada al usuario.

Consideraciones móviles

Si estás reproduciendo videos con HTML5 en dispositivos móviles, su comportamiento difiere. En iOS esto automáticamente cambia a pantalla completa en iPhones/iPods, pero no con tablets.

Algunas librerías como VideoJS han removido los controles de dispositivos móviles hasta que su estabilidad crezca.

Librerías útiles

Hay unas pocas librerías para video en HTML5 útiles:

Enlaces de Mozilla

Mozilla tiene algunos grandes artículos sobre video web:

Otros enlaces útiles

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.

Compartir artículo:

  • ¡Participa!

    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa