Thực hành tốt nhất H.264/FLV cho HTML

Question

Tôi chạy một trang web có một phần của khoảng 700 video tham chiếu (Và không, nó không phải là khiêu dâm - hãy để tâm trí của bạn thoát khỏi máng xối :-)).

Các video hiện ở định dạng FLV. Chúng tôi sử dụng JWPlayer để hiển thị các video đó. IIS6 được lưu trữ. Mọi thứ đều hoạt động tốt.

Như tôi đã hiểu, H.264 (không phải FLV và có thể không phải OGG) là tiêu chuẩn video HTML5 được ưa thích mới nổi. Ngày nay, iPad thực sự chỉ tôn trọng H.264 hoặc YouTube. Có lẽ, ngay sau đó, nhiều trình duyệt quan trọng hơn sẽ đi theo sự dẫn dắt của Apple và chỉ tôn trọng thẻ HTML5.

OK, vì vậy, tôi nghĩ tôi có thể tìm ra cách chuyển đổi video hiện tại của mình thành định dạng H.264 thích hợp. Có nhiều công cụ có sẵn, bao gồm ffmpeg.exe. Tôi chưa thử nó, nhưng tôi không nghĩ rằng đó sẽ là một vấn đề sau khi fiddling với các thiết lập codec.

Câu hỏi của tôi là nhiều hơn về chính vùng chứa - tức là lập kế hoạch chuyển đổi duyên dáng cho tất cả người dùng. Đề xuất thực hành tốt nhất để hiển thị những video này là gì? Nếu tôi chỉ sử dụng thẻ HTML5, thì có lẽ bất kỳ trình duyệt nào chưa hỗ trợ HTML5 sẽ không thấy video. Và nếu tôi hiển thị chúng ở định dạng Flash thông qua JWPlayer hoặc một số trình phát khác thì chúng sẽ không thể phát trên iPad. Tôi có phải làm phát hiện UserAgent xấu xí ở đây để tìm ra những gì để render?

Tôi biết JWPlayer hỗ trợ phương tiện H.264, nhưng không phải chính trình phát đó là thành phần Flash và do đó không thể phát trên iPad? Xin lỗi nếu tôi không rõ ràng, nhưng tôi đang gãi đầu về một kế hoạch chuyển tiếp duyên dáng sẽ hoạt động cho các trình duyệt hiện tại, iPad và sóng HTML5 sắp tới. Tôi không phải là chuyên gia video, vì vậy mọi lời khuyên sẽ được chào đón nhiều nhất, cảm ơn.

Answer 1

Hãy nhận biết Firefox không hỗ trợ H.264 với Thẻ video, vì vậy nếu bạn muốn có dự phòng duyên dáng thì bạn nên hiển thị thẻ video như dưới đây và có phiên bản OGG của video.

 <video controls id="video" width="320" height="240" preload autobuffer > 
      <source src="http://mycdn.com/videos/vid1.ogg" type="video/ogg" /> 
      <source src="http://mycdn.com/videos/vid1.mp4" type="video/mp4" /> 
      <!--RENDERED ON BROWSERS WITH NO HTML5 VIDEO SUPPORT--> 
      <object width="320" height="240"> 
      <param name="movie" value="myplayer.swf"> 
      <embed src="myplayer.swf" width="550" height="400"> 
      </embed> 
      </object> 
      <!----> 
     </video> 

Answer 2

Tôi không chắc chắn nếu điều này là một câu trả lời hay chỉ là một nhận xét, nhưng tôi thực sự cần phải thách thức một trong những giả định của câu hỏi ban đầu: "Có lẽ, chẳng bao lâu nhiều quan trọng hơn các trình duyệt sẽ theo sự dẫn dắt của Apple và chỉ tôn trọng thẻ HTML5. "

Điều này không được sao lưu bởi bất kỳ thứ gì tôi có thể thấy.

1. Tất cả trình duyệt dành cho máy tính để bàn hỗ trợ plugin, bao gồm Flash. Hầu hết các điện thoại thông minh/máy tính bảng không phải của Apple đều hỗ trợ Flash, hỗ trợ plugin bổ sung hoặc hỗ trợ các trình duyệt thay thế.
2. Tất cả các trình duyệt, ngay cả một hệ điều hành iPhone, hỗ trợ thẻ đối tượng và ít nhất là cố gắng làm điều gì đó với nó. Họ thậm chí hỗ trợ những thứ như marquee và thẻ font! Thẻ đối tượng sẽ tồn tại trong một thời gian dài, và theo như tôi biết, ngay cả một phần của HTML5.
3. Firefox, có thể là trình duyệt số 2 sau các phiên bản IE khác nhau, hiện không hỗ trợ H.264.
4. Microsoft đã nói rõ rằng họ không thích Flash và muốn mọi người sử dụng Silverlight, sao lưu cảm giác của tôi rằng thẻ đối tượng ở đây để ở. Họ đã cam kết mơ hồ chỉ hỗ trợ các thẻ video HTML5 gốc trong IE9. Trong khi chờ đợi, họ gửi plugin Flash như một phần của hệ điều hành trên Vista và Win7.

Dù sao, để đến phần thịt thực sự của câu hỏi: "Câu hỏi của tôi là nhiều hơn về chính thùng chứa - tức là, lập kế hoạch chuyển tiếp duyên dáng cho tất cả người dùng.Đề xuất phương pháp hay nhất để hiển thị những video này là "

Thẻ video HTML5 hỗ trợ đặt tên nhiều nguồn, vì vậy bạn có thể đặt video H.264 gốc làm 'chính' và trình phát Flash làm 'dự phòng' sử dụng nếu trình duyệt không có hỗ trợ cho các dòng video H.264 thẳng

<video> 
<source src="../videos/primary.mp4" type="video/mp4" /> 
<object> 
    <param name="movie" value="fallbackplayer.swf"> 
    <embed src="../videos/fallbackplayer.swf"> 
    </embed> 
</object> 
</video> 

Answer 3

sự hỗ trợ trong mỗi trình duyệt cho codec video được như thế này:.

• Firefox: Ogg Theora/Vorbis
• Opera: Ogg Theora/Vorbis
• Chrome: Ogg Theora/Vorbis và h.264
• Safari: h.264 (Ogg Theora/Vorbis với các thành phần XiphQT cài đặt)
• IE9: h.264

tôi khuyên bạn nên thay thế Ogg Theora một cách riêng tư. Tôi biết nó không phải là ý tưởng nếu bạn đang quan tâm đến không gian đĩa, nhưng với tất cả nhờ tiền bản quyền bằng sáng chế và sợ trolls bằng sáng chế, đó là tình hình chúng tôi đang mắc kẹt với.

Answer 4

Không trả lời trực tiếp câu hỏi của bạn, nhưng doom9.org có vô số hướng dẫn tuyệt vời về chuyển đổi/xử lý video. có thể hữu ích cho bạn

Answer 5

Đề nghị bạn đọc video for everybody để thực hiện trình duyệt chéo tốt. Bạn có thể sử dụng H.264 cho dự phòng Flash nhưng cũng như Lachlan nói bạn nên kết xuất với Ogg để có khả năng tương thích hoàn toàn với trình duyệt chéo.

Answer 6

Vì Chrome chưa bao giờ thực sự rút phích cắm ra để hỗ trợ h264, Firefox cũng giữ nó và đang lên kế hoạch hỗ trợ tốt hơn định dạng.

https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats (khoảng 1/3 đường xuống trang)