Có một số cách để thêm nội dung nghe nhìn vào trang web. Trước đây, bạn đã tìm hiểu cách sử dụng thẻ <video> tiêu chuẩn. Trong bài viết này, bạn sẽ tìm hiểu về một số khung nội dung đa phương tiện (hoặc thư viện) có sẵn mà bạn có thể sử dụng để mở rộng hoặc thay thế hành vi của trình phát video HTML5 mặc định.
Khung nội dung nghe nhìn có cả loại độc quyền và nguồn mở, và cốt lõi của các khung này là một tập hợp các API hỗ trợ phát âm thanh và/hoặc video cho nhiều định dạng vùng chứa và giao thức truyền. Một khung tốt có cấu trúc mô-đun và cung cấp tài liệu rõ ràng và chi tiết. Tốt nhất là bạn cũng nên thiết lập và sử dụng tương đối dễ dàng. Bạn có thể tự hỏi: "Nếu trình phát video HTML5 đã cung cấp hầu hết các tính năng, thì tại sao tôi phải sử dụng khung hoặc thư viện?" Đó là một câu hỏi hay, hãy cùng tìm hiểu sâu hơn nhé!
Lợi ích của việc sử dụng khung
Trong hầu hết các trường hợp vượt quá nhu cầu của một trang web cơ bản, bạn sẽ muốn sử dụng khung nội dung đa phương tiện để phân phát nội dung. Trừ phi bạn đã chuẩn bị sẵn sàng để phát triển và duy trì một bộ tính năng phong phú như phát ngoại tuyến, phát trực tuyến, số liệu phân tích, hình trong hình, xem trước hình thu nhỏ, nhúng và kiếm tiền (chẳng hạn như tối ưu hoá tỷ lệ đáp ứng, lập lịch quảng cáo hoặc đặt giá thầu dựa vào tiêu đề), thì bạn có thể chuyển tải sự phức tạp đó sang một giải pháp hiện có.
Đây là lúc các khung nội dung nghe nhìn phát huy tác dụng. Các khung này cung cấp cho bạn một bộ tính năng và điều kiện để bạn có thể sử dụng các tính năng đó, sau đó bạn phải quyết định khung nào phù hợp với dự án của mình. Trong bài viết tiếp theo, chúng ta sẽ thảo luận về cách tạo một PWA có tính năng phát trực tuyến ngoại tuyến triển khai một số tính năng phức tạp. Cảnh báo tiết lộ nội dung: đó là một khối lượng công việc lớn và vẫn còn lâu mới có thể trở thành giải pháp sẵn sàng cho sản xuất. Để tránh đau đầu, hãy sử dụng một khung.
Có rất nhiều lựa chọn để bạn chọn, nhưng hiện tại, bài viết này sẽ tập trung vào 3 lựa chọn là Shaka Player, JW Player và Video.js.
Shaka Player
Theo tài liệu, Shaka Player của Google là một thư viện JavaScript nguồn mở dành cho nội dung nghe nhìn thích ứng. Trình phát này phát các định dạng nội dung nghe nhìn thích ứng (chẳng hạn như DASH và HLS) trong trình duyệt mà không cần sử dụng trình bổ trợ. Thay vào đó, Shaka Player sử dụng các tiêu chuẩn web mở Tiện ích MediaSource và Tiện ích nội dung nghe nhìn đã mã hoá.
Shaka Player cũng hỗ trợ lưu trữ và phát ngoại tuyến nội dung nghe nhìn bằng cách sử dụng IndexedDB. Nội dung có thể được lưu trữ trên bất kỳ trình duyệt nào. Việc lưu trữ giấy phép phụ thuộc vào khả năng hỗ trợ của trình duyệt.
Có hướng dẫn về cách sử dụng cơ bản trên trang web tài liệu về Shaka Player. Tuy nhiên, tóm lại, để sử dụng Shaka Player, trước tiên, bạn cần tạo một trang HTML có phần tử video hoặc âm thanh. Sau đó, trong JavaScript của ứng dụng, bạn sẽ cài đặt polyfill và kiểm tra xem trình duyệt có hỗ trợ hay không. Sau khi trình duyệt xác nhận hỗ trợ Shaka Player, một tập lệnh sẽ tạo một đối tượng Player để gói phần tử nội dung đa phương tiện, nghe lỗi, sau đó tải tệp kê khai. Shaka Player sẽ tiếp quản từ đó.
Với Shaka, bạn sẽ cần tự lưu trữ và mã hoá tệp nội dung nghe nhìn. Việc tạo máy chủ nội dung nghe nhìn không quá phức tạp, tuy nhiên, việc mã hoá/chuyển mã nội dung nghe nhìn có thể tốn thời gian và phức tạp. Bạn có thể muốn chuyển phần này sang một dịch vụ như Zencoder, Amazon Elastic Encoder hoặc Google Transcoder API để tự động hoá các tác vụ lặp lại và tăng tốc quá trình.
Điều tuyệt vời về Trình phát Shaka là cũng có một công cụ và SDK đóng gói nội dung nghe nhìn thực sự tuyệt vời để đóng gói và mã hoá DASH và HLS có tên là Trình đóng gói Shaka. Thư viện này có thể chuẩn bị và đóng gói nội dung đa phương tiện để phát trực tuyến, nội dung này bạn đã tìm hiểu trước đó trong phần Chuyển đổi nội dung đa phương tiện và Mã hoá nội dung đa phương tiện.
JW Player
Nếu đang tìm một lựa chọn cung cấp dịch vụ lưu trữ và mã hoá/biến mã, bạn có thể xem xét JW Player. Tuy nhiên, hãy lưu ý rằng JW Player là phần mềm độc quyền. Tức là bạn không có nhiều quyền kiểm soát đối với nền tảng hoặc lộ trình. Có một phiên bản miễn phí cơ bản, trong đó video sẽ hiển thị hình mờ và một phiên bản thương mại.
JW Player hỗ trợ truyền trực tuyến bằng MPEG-DASH (chỉ phiên bản có tính phí), Quản lý quyền kỹ thuật số (DRM) (với Vualto), quảng cáo tương tác, tuỳ chỉnh giao diện và tính năng nhúng. Có API và SDK được ghi chép đầy đủ. Tuy nhiên, nếu bạn chỉ tìm cách lưu trữ nội dung nghe nhìn một cách nhanh chóng và miễn phí, thì việc nhúng video trên YouTube thường là lựa chọn miễn phí tốt nhất.
Video.js
Theo trang web của họ, Video.js được xây dựng từ đầu cho một thế giới HTML5. Công cụ này hỗ trợ video HTML5 và các định dạng phát trực tuyến hiện đại như DASH và HLS, cũng như YouTube và Vimeo. Trình phát này hỗ trợ phát video trên máy tính và thiết bị di động, đồng thời trông đẹp ở mọi nơi nhờ giao diện dựa trên CSS.
Có một vài cách để sử dụng Video.js, nhưng cách dễ nhất là sử dụng phiên bản CDN miễn phí do Fastly cung cấp. Bạn có thể tìm hiểu thêm về cách thiết lập trình phát trên trang bắt đầu. Video.js là một trình phát video rất mạnh mẽ và giống như Shaka Player, bạn cũng cần lưu trữ và mã hoá video. Tuy nhiên, có một điểm khác biệt trong hệ thống trình bổ trợ là bạn có thể thực hiện các thao tác như phát video trên YouTube trong trình phát Video.js (cũng có thể tuỳ chỉnh).
Các khung khác
Có rất nhiều khung và thư viện khác nhau, bài viết này chỉ đề cập đến một số khung và thư viện phổ biến. Khi chọn một khung, bạn nên cân nhắc những tính năng cần thiết cho dự án và cách bạn dự định lưu trữ cũng như mã hoá hoặc chuyển mã nội dung nghe nhìn. Bạn có cần Quảng cáo trước video hay các chiến lược kiếm tiền khác không? Nội dung nghe nhìn của bạn có thể dùng khi không có mạng không? Ngân sách của bạn lớn hay nhỏ? Hoặc bất kỳ điều gì khác cần cân nhắc. Hãy tìm hiểu và hỏi ý kiến những người trong mạng lưới của bạn. Có hàng chục lựa chọn tuyệt vời khác và trước khi đưa ra lựa chọn, hãy dành thời gian để chọn một lựa chọn phù hợp với nhóm của bạn và tránh tạo ra các khoản nợ kỹ thuật hoặc sự phức tạp không cần thiết để duy trì trong vòng đời dự án.
Tiếp theo, bạn sẽ tìm hiểu về PWA có tính năng phát trực tuyến ngoại tuyến mà chúng tôi đã xây dựng để minh hoạ cách tiếp cận và giải quyết các thách thức chính khi triển khai giải pháp của riêng bạn chỉ bằng đối tượng video HTML5 mà không cần khung để xử lý các vấn đề phức tạp.