¿Cómo detectar formatos de video compatibles para la etiqueta de video HTML5?

Estoy haciendo una aplicación en HTML5 usando la etiqueta de video, en la aplicación el usuario elige un archivo de video y yo reproduzco ese archivo. Todo esto sucede localmente porque solo enlazo a ese archivo en la máquina del usuario.¿Cómo detectar formatos de video compatibles para la etiqueta de video HTML5?

Quiero permitir solo los formatos que el navegador puede reproducir para reproducirlos en mi aplicación, y mostrar un error para los formatos no admitidos. El problema es que diferentes navegadores pueden jugar en diferentes formatos.

Sé que puedo verificar el navegador y asociarlo con los formatos que sé que puede reproducir, pero ¿y si el navegador se actualiza para admitir otro formato? Tendré que actualizar mi aplicación con la nueva información y, mientras tanto, los usuarios no podrán reproducir formatos compatibles. ¿Hay alguna manera de verificar solo los formatos de video compatibles?

Fuente

2011-09-17 Cokegod

Puede consultar códecs para diferentes tipos de video con HTMLVideoElement.prototype.canPlayType. También hay una gran biblioteca de detección de características HTML5, Modernizr.

var testEl = document.createElement("video"), 
    mpeg4, h264, ogg, webm; 
if (testEl.canPlayType) { 
    // Check for MPEG-4 support 
    mpeg4 = "" !== testEl.canPlayType('video/mp4; codecs="mp4v.20.8"'); 

    // Check for h264 support 
    h264 = "" !== (testEl.canPlayType('video/mp4; codecs="avc1.42E01E"') 
     || testEl.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); 

    // Check for Ogg support 
    ogg = "" !== testEl.canPlayType('video/ogg; codecs="theora"'); 

    // Check for Webm support 
    webm = "" !== testEl.canPlayType('video/webm; codecs="vp8, vorbis"'); 
}

Fuente

2011-09-17 00:52:09 Will

Esto me ayudó muchísimo, gracias. Tengo curiosidad por qué hay dos pruebas para mp4? H264 es un tipo de mp4 en el que creo y estoy probando el soporte de mp4 o webm. – edwinbradford

Aquí hay un enlace al código fuente exacto: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video.js – BishopZ

Debe tenerse en cuenta que esto comprueba [Nivel basal de referencia 3 H. 264 asistencia técnica] (http://stackoverflow.com/questions/16363167/html5-video-tag-codecs-attribute#answer-16365526). –

Te recomiendo que uses algo como http://videojs.com/, usan un Flashback y su sintaxis te dará el orden correcto de los formatos que deberías usar para todos los navegadores.

dice así:

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a>

Si el navegador no entiende MP4, va a WebM, si no se va a OGG, si no lo entiende, no hace falta a la caída de Flash.

Piénsalo como las declaraciones de la familia de fuentes en CSS.

Fuente

2011-09-17 00:46:49 leopic

Esto no es exactamente la respuesta correcta. Es correcto que los navegadores verifiquen el tipo de fuente y, si no lo entienden, prueban la siguiente fuente en orden (y posiblemente usen flash si la agregaste como alternativa), pero debes tener en cuenta el video ** códec **. Si no especifica explícitamente el códec para el tipo de video, puede suceder que el navegador conozca el ** tipo de video ** pero fallará debido al soporte ** codec ** no disponible. En este caso, el navegador no intentará cargar la siguiente fuente. –

solo un ejemplo de código para ver el marcado con el códec: '

¿Cómo detectar formatos de video compatibles para la etiqueta de video HTML5?

Respuesta

Cuestiones relacionadas