HTML5 video etiketi için desteklenen video formatları nasıl tespit edilir?

Question

Kullanıcıya bir video dosyası seçtiği uygulamada video etiketini kullanarak HTML5'te bir uygulama yapıyorum ve bu dosyayı oynuyorum. Tüm bunlar yerel olarak gerçekleşir, çünkü sadece bu dosyaya kullanıcının makinesinde bağlanıyorum.

Sadece tarayıcının benim uygulamamda oynatılmak üzere oynayabileceği biçimlere izin vermek ve desteklenmeyen biçimler için bir hata göstermek istiyorum. Sorun, farklı tarayıcıların farklı formatları oynayabilmesidir.

Tarayıcıyı kontrol edebildiğimi ve oynayabildiğini bildiğim biçimlerle eşleştirebileceğimi biliyorum, ancak tarayıcı başka bir biçimini desteklemek için güncelleştirilirse ne olur? Uygulamamı yeni bilgilerle güncellemem gerekecek ve bu arada kullanıcılar desteklenen biçimleri oynatamayacak. Desteklenen video formatlarını kontrol etmenin bir yolu var mı?

Answer 1

Farklı video türleri için codec'leri HTMLVideoElement.prototype.canPlayType ile kontrol edebilirsiniz. Ayrıca harika bir HTML5 özellik tespit kütüphanesi, 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"'); 
} 

Answer 2

http://videojs.com/ gibi bir şey kullanmanızı öneririm, bir Flash geri dönüşümü kullanırlar ve sözdizimi, tüm tarayıcılar için kullanmanız gereken biçimlerin doğru sırasını size verir.

Böyle giderse: Tarayıcı MP4 anlamıyor

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

ise, o OGG gider yoksa bunu anlamıyor, eğer o giderse, WebM gider Flash geri dönüşüme.

Bunu, CSS'deki font ailesi bildirimleri gibi düşünün.