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

insertar audio mp3 en html

Question

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.

Quiero permitir que solo se reproduzcan los formatos que puede reproducir el navegador 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 consultar 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?

Answer 1

Te recomiendo que uses algo como http://videojs.com/ , usan un respaldo de Flash y su sintaxis te dará el orden correcto de los formatos que debes 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 va a OGG, si no lo entiende, va a la reserva de Flash.

Piense en ello como las declaraciones de la familia de fuentes en CSS.

Answer 2

Puede verificar códecs para diferentes tipos de video con HTMLVideoElement.prototype.canPlayType . También hay una gran biblioteca de detección de funciones 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"'' );
}