Video HTML5 10 điều mà các nhà thiết kế cần biết

Cuộc cách mạng HTML5 là các nhà thiết kế web thú vị từ tất cả các khu vực trên toàn cầu. Các thông số kỹ thuật mới hỗ trợ hàng tá các yếu tố và thuộc tính để xây dựng các trang web ngữ nghĩa. Các tính năng mới này bao gồm các thẻ đa phương tiện cho các định dạng âm thanh và video.

Trong những năm qua, một trình phát đa phương tiện dựa trên Flash không đủ để phát trực tuyến trên Web và công nghệ này vẫn cần thiết để hỗ trợ các trình duyệt cũ. Nhưng rất may các tiêu chuẩn hiện đại đã nâng cao và việc đưa vào video HTML5 mở ra nhiều cơ hội mới.

Trong hướng dẫn này, tôi muốn giới thiệu về video HTML5 cho Web. Sẽ có một số thực hành để hiểu trình phát trong trình duyệt riêng và tất cả chức năng của nó. Và cách tốt nhất để làm quen là lặn trong đầu trước!

1. Các loại phương tiện truyền thông

Khi bạn làm việc với trình phát video flash, tất cả đều quá phổ biến để liên kết tất cả các định dạng video trong .flv. Trong khi điều này không hoạt động, hầu hết các tệp flv không thể giữ được chất lượng ở bất cứ đâu gần các định dạng tệp / codec nâng cao hơn. Có 3 loại video quan trọng được HTML5 hỗ trợ: MP4, WebM và Ogg / Ogv. Loại tệp MPEG-4 thường được mã hóa ở H.264, cho phép phát lại trong trình phát Flash của bên thứ ba. Điều này có nghĩa là bạn không cần phải giữ một bản sao video .flv để hỗ trợ phương pháp dự phòng! WebM và Ogg là hai loại tệp mới hơn nhiều liên quan đến video HTML5. Ogg sử dụng mã hóa Theora dựa trên định dạng tệp âm thanh tiêu chuẩn nguồn mở. Chúng có thể được lưu với phần mở rộng .ogg hoặc .ogv.

WebM là một dự án do Google đưa ra mà bạn có thể đọc thêm về trang web Dự án WebM. Định dạng này đã được Opera, Google Chrome, Firefox 4+ và gần đây nhất là Internet Explorer 9. Nó vẫn chưa được biết đến bởi hầu hết các chuyên gia web nhưng WebM là định dạng phương tiện video hàng đầu trong tương lai của video web.

2. Hỗ trợ trình duyệt

Vì vậy, loại tập tin nào bạn cần cho trang web của bạn? Vâng lý tưởng cả 3 sẽ là tuyệt vời vì họ cung cấp phổ hỗ trợ đầy đủ. Tuy nhiên, điều này không thực tế và trên thực tế, bạn có thể bao gồm tất cả các cơ sở chỉ với hai trong số chúng. Dưới đây là bảng phân tích những gì hoạt động cho mỗi trình duyệt:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Không có HTML5, Chỉ flash!

Nếu bạn còn nhớ, trước đây tôi đã đề cập rằng hầu hết các trình phát video flash sẽ hỗ trợ các tệp MP4 miễn là chúng được mã hóa ở H.264. Như vậy, mỗi trình duyệt này sẽ nhúng MP4 + Flash như một phương sách cuối cùng. Điều này có nghĩa là bạn chỉ cần tạo hai định dạng video khác nhau để hỗ trợ tất cả các trình duyệt. MP4 cho Safari / IE9 và lựa chọn giữa WebM hoặc Ogg cho phần còn lại.

Theo ý kiến ​​của tôi, tôi khuyên bạn nên gắn bó với định dạng WebM. Nó có một số tên tuổi lớn đằng sau dự án (cụ thể là Google) và đã đạt được rất nhiều lực kéo trong cộng đồng HTML5. Ogg / Ogv sẽ được hỗ trợ nhưng rất có thể sẽ mất đi sự phổ biến đối với kích thước tệp nhỏ hơn của WebM. Bạn có thể đọc một đoạn liên quan về tương lai của video trên web được viết bởi Sean Golliher.

3. Nhúng video HTML5 đơn giản

Bây giờ chúng ta hãy xem cú pháp cần thiết để nhúng một số mã mẫu. Tất cả những gì chúng ta cần là thẻ video HTML5 để tham chiếu từng URL phim.

Lưu ý điều khiển và tự chạy các thuộc tính không cần phải được đặt với bất kỳ giá trị nào. Tôi cũng bao gồm một áp phích thuộc tính tải trước một hình ảnh qua trình phát video trước khi phát trực tuyến. Đây là một bản xem trước phổ biến với nhiều người chơi web.

Chúng tôi cung cấp cả định dạng MP4 và WebM cho phần tử video. Nếu không thể tải cả hai thứ này thì chúng tôi sẽ hiển thị lỗi để người dùng cập nhật trình duyệt của họ.

4. Cung cấp một dự phòng Flash

Ví dụ trên là hoàn hảo cho tất cả các trình duyệt web tuân thủ tiêu chuẩn. Tuy nhiên, chúng ta cũng cần phải xem xét rằng thế giới không phải lúc nào cũng là tiên tiến của công nghệ. Chúng tôi cần hỗ trợ người dùng trên các phiên bản cũ hơn của Safari, Mozilla Firefox và đặc biệt là Internet Explorer.

Cách tốt nhất để đạt được điều này là thông qua một trình phát dự phòng Flash. Chúng có thể được thêm vào bằng cách sử dụng nhúng hoặc là vật các thẻ để tham chiếu tệp .swf của bên thứ ba. JW Player và Flowplayer là hai giải pháp nguồn mở miễn phí mà bạn có thể xem xét. Nhưng cũng hãy xem các trình phát video cao cấp trên ActiveDen có thể rẻ đến $ 15- $ 20.

Bây giờ, hãy điều chỉnh mã ở trên để bao gồm trình phát Flash dự phòng để hỗ trợ gần như mọi trình duyệt tồn tại.

5. Hỗ trợ thiết bị di động

Chủ đề này vẫn còn nhiều tranh cãi vì ngành công nghiệp di động còn quá trẻ. Apple ra mắt với sự hỗ trợ cho MP4 trên thiết bị Mac và iOS. Điều này có nghĩa là bạn có thể phát trực tiếp các tệp video .mp4 trên iPad, iPhone hoặc iPod Touch trong giao diện người dùng video tiêu chuẩn. Điều này chiếm rất nhiều thị phần.

Gần đây, các thiết bị Android đã gặp khó khăn khi nhận được mức hỗ trợ tương tự. Tuy nhiên, Google cuối cùng đã chấp nhận phát trực tuyến web .mp4, vốn tận dụng gần như tất cả người dùng di động. Và vì Flash không phải là một lựa chọn ở đây nên MP4 là giải pháp tốt nhất hiện có. Đây là lý do tại sao bạn muốn nhúng mã .mp4 trước để thiết bị iOS có thể nhận ra tệp ngay lập tức.

6. Tác nhân người dùng Safari

Một lỗi phải được đề cập là một lỗi tồn tại giữa trình phát Flash và phát trực tuyến HTML5 .mp4 trên Safari. Vì trình duyệt có thể hỗ trợ cả hai tệp, bạn có thể gặp khó khăn khi truyền luồng video HTML5 thay cho Flash. Tuy nhiên, nhờ vào bài đăng blog tuyệt vời này trên TUAW, thật dễ dàng để thay đổi tác nhân người dùng duyệt web của bạn.

Điều này sẽ buộc trang web của bạn nhận ra trình duyệt đang chạy trên thiết bị khác. Nhiều khả năng bạn sẽ chọn iPad, không hỗ trợ phát lại Flash. Đây là vấn đề lớn duy nhất bạn có thể gặp phải khi thử nghiệm các phương thức phát lại flash & flash MP4.

7. Quản lý điều khiển người chơi

Dù bạn có tin hay không thì cũng có những phương pháp bạn có thể sử dụng để thao tác các điều khiển trình phát video HTML5. Tất cả có thể được thực hiện bằng JavaScript bằng cách lấy từ một tập các phương thức mở. Có quá nhiều cách để liệt kê ra ở đây, nhưng hãy thử lướt qua các tài liệu phần tử phương tiện W3C để biết thêm chi tiết.

Để cung cấp cho bạn một ý tưởng chung, blog Opera dev đã đăng một số hướng dẫn ngắn rất phù hợp cho người mới. Ngay cả khi bạn chưa bao giờ chọn JavaScript hoặc jQuery trước đây, vẫn rất đơn giản để bắt đầu chạy với cái này. Bạn có thể gọi các thuộc tính cụ thể của phương tiện video như tắt tiếng hoặc là thời điểm hiện tại. Sau đó, bạn có thể thực hiện các hành động (làm mờ nền, hiển thị quảng cáo) dựa trên các tiêu chí này bằng cách thao tác DOM trong jQuery.

Nhà phát triển tương tự trong bài viết Opera cung cấp bản demo hoạt động của trình phát video theo kịch bản của họ. Cơ hội để tùy chỉnh các điều khiển UI của riêng bạn là nổi bật. Nó chỉ cho thấy video HTML5 mạnh mẽ như thế nào.

8. Chuyển đổi định dạng video

Đây là một vấn đề lớn khác có thể sẽ gây nhầm lẫn cho các cá nhân ít hiểu biết về công nghệ. Bạn chỉ muốn đưa trang web của bạn lên và phát trực tuyến và bây giờ bạn phải đối phó với việc chuyển đổi video? Chà, thật ra không khó lắm đâu..

Để đối phó với MP4 vốn là ưu tiên lớn nhất của bạn, bạn có thể sử dụng HandBrake, một giải pháp nguồn mở miễn phí chạy trên cả 3 hệ điều hành chính. Nó sẽ hỗ trợ H.264 cùng với một vài codec khác làm cho nó trở thành lựa chọn tốt nhất cho người dùng miễn phí. Nếu bạn có tiền để bỏ ra, tôi phải giới thiệu công cụ chuyển đổi Xilisoft trên Mac App Store chỉ với giấy phép 40 đô la trọn đời.

Nó trông giống như tuyến đường WebM làm cho cuộc sống dễ dàng hơn nhiều. Miro Video Converter là một công cụ miễn phí cho Windows và OS X, tạo ra các tệp WebM chất lượng cao. Nó cũng có thể thực hiện mã hóa Ogg Theora với chất lượng khá tuyệt vời..

9. Xây dựng trình phát web

Các định dạng video với thông số kỹ thuật HTML5 vẫn còn mới đối với các nhà phát triển. Có các giao thức mở đang chờ để được chơi để cho phép điều khiển tùy chỉnh, thanh trượt, biểu tượng phát / tạm dừng, v.v. Nếu bạn cảm thấy táo bạo, hãy xem hướng dẫn này về cách tạo trình phát HTML5 của riêng bạn (được xuất bản trên Splashnology).

Mã này hơi mãnh liệt đối với người mới vì nó yêu cầu nhắm mục tiêu CSS nâng cao và một chút jQuery chính thức. Có các khung khác mà bạn có thể xây dựng dựa trên đó đã cung cấp một thiết kế trình phát tùy chỉnh. Tương tự bản trình bày trình chiếu này là một giới thiệu tuyệt vời để xây dựng trình phát video HTML5.

Xây dựng trình phát video HTML5

10. Thư viện VideoJS

VideoJS có lẽ là giải pháp yêu thích của tôi cho trình phát video HTML5. Tất cả những gì bạn cần là biểu định kiểu JavaScript và CSS tự lưu trữ của chúng được bao gồm ở đâu đó trong tài liệu của bạn. Sau đó, bạn viết mã video HTML5 tiêu chuẩn với một số lớp bổ sung để tạo giao diện. Tôi đã thêm mã mẫu của họ dưới đây:

Nếu bạn tình cờ chạy một blog WordPress, bạn cũng có thể thử plugin WP tùy chỉnh của họ. Nó sẽ tự động bao gồm thư viện js / css trên các trang nơi bạn hiển thị video HTML5. Và bạn có thể làm điều này từ bên trong bất kỳ trình chỉnh sửa bài hoặc trang nào bằng cách sử dụng mã ngắn (xem tại đây).

Phần kết luận

Tôi hy vọng hướng dẫn giới thiệu này có thể khuấy động sự quan tâm của bạn đối với tương lai của video trên web. Với nhiều người dùng chuyển sang di động, điều quan trọng là các tiêu chuẩn HTML5 được áp dụng cho các loại phương tiện này. Web nên được làm đơn giản hơn để các nhà phát triển có thể tạo ra các giải pháp được hỗ trợ đầy đủ nhanh hơn nhiều. Chúng tôi rất thích nghe ý tưởng và đề xuất của bạn cho tương lai của video HTML5. Nếu bạn muốn chia sẻ, vui lòng để lại nhận xét trong khu vực thảo luận dưới đây.