Cách phát hiện định dạng video được hỗ trợ cho thẻ video HTML5?

Question

Tôi đang tạo một ứng dụng trong HTML5 bằng thẻ video, trong ứng dụng người dùng chọn tệp video và tôi phát tệp đó. Tất cả điều này xảy ra cục bộ bởi vì tôi chỉ liên kết đến tệp đó trong máy của người dùng.

Tôi muốn chỉ cho phép các định dạng mà trình duyệt có thể phát trong ứng dụng của tôi và hiển thị lỗi cho các định dạng không được hỗ trợ. Vấn đề là các trình duyệt khác nhau có thể chơi các định dạng khác nhau.

Tôi biết tôi có thể kiểm tra trình duyệt và khớp với trình duyệt với các định dạng mà tôi biết nó có thể phát, nhưng nếu trình duyệt cập nhật để hỗ trợ định dạng khác thì sao? Tôi sẽ phải cập nhật ứng dụng của mình với thông tin mới và trong khi đó người dùng sẽ không thể phát các định dạng được hỗ trợ. Có cách nào để kiểm tra các định dạng video được hỗ trợ không?

Answer 1

Bạn có thể kiểm tra codec cho các loại video khác nhau với HTMLVideoElement.prototype.canPlayType. Ngoài ra còn có một thư viện phát hiện tính năng HTML5 tuyệt vời, 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

Tôi khuyên bạn nên sử dụng một cái gì đó như http://videojs.com/, họ sử dụng dự phòng Flash và cú pháp của họ sẽ cung cấp cho bạn thứ tự đúng của các định dạng mà bạn nên sử dụng cho tất cả các trình duyệt.

Nó đi như thế này:

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

Nếu trình duyệt không hiểu MP4, nó đi để WebM, nếu nó không nó đi sang OGG, nếu nó không hiểu nó, nó đi đến dự phòng Flash.

Hãy suy nghĩ về nó như khai báo phông chữ-gia đình trong CSS.