HTML5 Video và suy thoái?

Question

Tôi đã chơi xung quanh với thẻ video HTML5 và tôi đang bối rối về cách tốt nhất để làm suy giảm khi bạn không thể hỗ trợ codec?

Đối với các trình duyệt cũ (hoặc IE) không hỗ trợ thẻ video ở tất cả điều này khá là thẳng về phía trước:

<video width="320" height="240"> 
    <source src="vid.ogv" type='video/ogg'> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

Họ sẽ rơi qua và sẽ nhận được phiên bản Flash (hoặc thay thế khác như một hình ảnh!)

Làm thế nào khi trình duyệt hỗ trợ thẻ chứ không phải codec - Ví dụ như FireFox 3.5 - và tôi không thể hỗ trợ OGG (có thể vì tôi đã có bản lưu trữ lớn H.264):

<video width="320" height="240"> 
    <source src="vid.mp4" type='video/mp4'> 
    <object> 
    <!-- Embed Flash video here to play mp4 --> 
    <object> 
</video> 

Tất cả những gì tôi nhận được trong FireFox 3.5 là một hộp màu xám có chữ x trong đó. Đây không phải là trải nghiệm người dùng tuyệt vời cho người dùng FireFox! Tôi chỉ có thể nghĩ đến việc sử dụng JavaScript để kiểm tra FF3.5 và thay đổi DOM !! đây thực sự là cái cũ tồi tệ rồi! ... hoặc có một phần nào đó của thông số tôi bỏ lỡ như một thẻ 'novideo' không?

Answer 1

Một phần quan trọng của sự xuống cấp duyên dáng là khả năng truy vấn ... Đi sâu vào HTML5 là một nội dung tuyệt vời ... đặc biệt, hãy xem video section. Mã có liên quan ở đây:

function supports_h264_baseline_video() { 
    if (!supports_video()) { return false; } 
    var v = document.createElement("video"); 
    return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 
} 

Lưu ý: điều này yêu cầu kiểm tra DOM, nhưng đối với khả năng và không phải chữ ký trình duyệt. Đó là điều quyền làm :-)

Một khi bạn biết nếu trình duyệt có thể hỗ trợ, bạn có thể hiển thị thẻ video của bạn hoặc kéo lên một hộp đèn hoặc chuyển hướng như bạn thấy phù hợp.

Answer 2

Video for Everybody 's test page cho biết Firefox 3.5 chỉ có thể phát OGG. Bạn có thể muốn thêm một phiên bản flash nếu bạn thực sự không muốn thêm OGG. VfE cũng không sử dụng JavaScript, vì vậy nó có thể đáng xem xét.

Answer 3

Một cách thực sự tốt để giải quyết vấn đề này là sử dụng thư viện hiện đại js.Its thực sự dễ sử dụng và nhanh chóng. Nó có thể kiểm tra khả năng HTML5 trong trình duyệt của người dùng. Truy cập trang web tại đây: http://www.modernizr.com/