Có một số cách để thêm nội dung nghe nhìn vào một 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 (hoặc thư viện) nội dung nghe nhì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 đa phương tiện có cả loại thuộc quyền sở hữu riêng và nguồn mở, trong đó cốt lõi là một tập hợp 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 làm việc tốt sẽ có cấu trúc mô-đun, đồng thời cung cấp tài liệu rõ ràng và chi tiết. Tốt nhất là bạn nên thiết lập và sử dụng ứng dụng tương đối dễ dàng. Có thể bạn đang 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 nên 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 nhé.
Lợi ích của việc sử dụng khung
Trong hầu hết trường hợp vượt ra ngoài nhu cầu của một trang web cơ bản, bạn sẽ muốn sử dụng khung phương tiện để phân phát nội dung của mình. Trừ phi bạn được chuẩn bị để 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, phân tích, hình trong hình, hình thu nhỏ xem trước, 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 đề, v.v., thì bạn có thể giảm bớt sự phức tạp đó cho một giải pháp hiện có.
Đây là lúc các khung nội dung truyền thông phát huy tác dụng. Chúng 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 chúng tôi xây dựng một PWA có tính năng phát trực tuyến khi không có mạng. PWA này sẽ triển khai một số tính năng phức tạp. Cảnh báo tiết lộ nội dung, giải pháp này có rất nhiều công sức và vẫn chưa thể hoàn thành việc phát hành công khai. Hãy tự giảm bớt đau đầu và sử dụng một khung làm việc.
Có rất nhiều lựa chọn để bạn lựa chọn, 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.
Trình phát Shaka
Theo tài liệu này, 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 Tiện ích MediaSource và Tiện ích phương tiện đã mã hoá theo tiêu chuẩn web mở.
Shaka Player cũng hỗ trợ lưu trữ và phát ngoại tuyến nội dung nghe nhìn bằ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ó các hướng dẫn về cách sử dụng cơ bản trên trang web tài liệu của Shaka Player. Tuy nhiên, về tóm tắt để 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 cần cài đặt các 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 khả năng hỗ trợ cho Shaka Player, một tập lệnh sẽ tạo đối tượng Trình phát để gói phần tử nội dung đa phương tiện, theo dõi lỗi rồi tải tệp kê khai. Shaka Player sẽ tiếp quản từ đó.
Với Shaka, bạn sẽ cần phải tự lưu trữ và mã hoá các tệp đa phương tiện của mình. Việc tạo một 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 nên giảm tải 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 này.
Ưu điểm lớn của Shaka Player là Shaka Packager 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 cũng như mã hoá DASH và HLS. Công cụ 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 mà bạn đã tìm hiểu trước đó trong bài viết Chuyển đổi nội dung nghe nhìn và Mã hoá nội dung nghe nhìn.
Trình phát JW
Nếu đang tìm một lựa chọn cung cấp dịch vụ lưu trữ và mã hoá/chuyển mã, thì bạn có thể cân nhắc sử dụng JW Player, nhưng hãy lưu ý rằng JW Player là phần mềm độc quyền. Điều này có nghĩa 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. Trong đó có một phiên bản miễn phí cơ bản, trong đó video hiển thị cùng với hình mờ và phiên bản thương mại.
JW Player hỗ trợ phát 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à nội dung nhúng. Có một API và SDK được ghi chép rõ ràng. Tuy nhiên, nếu bạn chỉ đang tìm một cách nhanh chóng và miễn phí để lưu trữ nội dung nghe nhìn, thì nhúng video trên YouTube thường là lựa chọn miễn phí phù hợp nhất.
Video.js
Theo trang web của họ, Video.js được xây dựng từ đầu cho thế giới HTML5. Công cụ này hỗ trợ các định dạng video HTML5 và các định dạng phát trực tiếp hiện đại như DASH (Truyền phát thích ứng động qua HTTP) và HLS (Phát trực tuyến dựa trên HTTP), cũng như YouTube và Vimeo. Ứng dụng 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ắt ở mọi nơi với các giao diện dựa trên CSS.
Có một số 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 của mình. Tuy nhiên, có một điểm khác biệt là ở hệ thống trình bổ trợ, nơi bạn có thể thực hiện những thao tác như phát video YouTube trong trình phát Video.js. Bạn cũng có thể tuỳ chỉnh trình phát này.
Các khung khác
Có rất nhiều khung và thư viện có sẵn. Bài viết này chỉ trình bày sơ lược về những nội dung hiện có. 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 cũng như cách bạn dự định lưu trữ và mã hoá hoặc chuyển mã nội dung đa phương tiện. Bạn có cần chạy 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ó khả dụng khi ngoại tuyến không? Ngân sách của bạn lớn hay nhỏ? Hoặc bất kỳ số lượng cần cân nhắc nào khác. Hãy nghiên cứu và nhờ mọi người trong mạng của bạn đưa ra gợi ý. Có rất nhiều lựa chọn hiệu quả khác và trước khi bạn đưa ra bất kỳ lựa chọn nào, 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 khoản nợ kỹ thuật không cần thiết hoặc tính phức tạp cần duy trì trong suốt 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 những 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ó khung để xử lý công việc khó khăn.