Khung nội dung truyền thông

Derek Herman
Derek Herman

Có một số cách để thêm nội dung nghe nhìn vào một trang web. Trước đó, 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 đa phương tiện có cả đa dạng nguồn mở và độc quyền. cốt lõi là một bộ 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 thường 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 cũng có thể thiết lập và sử 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 rồi, vậy tại sao tôi lại sử dụng một 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 ngoài 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 của mình. Trừ khi 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 nên giảm tải sự phức tạp đó cho giải pháp hiện tại.

Đây là lúc khung truyền thông phát huy tác dụng. Chúng cung cấp cho bạn một tập hợp tính năng và điều kiện mà 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 tôi sẽ thảo luận về cách chúng tôi xây dựng 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: tốn rất nhiều công sức và vẫn chưa thể trở thành một giải pháp sẵn sàng phát hành công khai. Giúp bạn không phải đau đầu và sử dụng một khung làm việc.

Có rất nhiều tuỳ chọn để lựa chọn, hiện tại, bài viết này sẽ tập trung vào 3 tuỳ chọn, đó là Shaka Player, JW PlayerVideo.js.

Người chơi 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. Google Play phát các định dạng nội dung nghe nhìn thích ứng (chẳng hạn như DASHHLS) 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 MediaSourceTiện ích nội dung nghe nhìn đã mã hoá tiêu chuẩn web.

Shaka Player cũng hỗ trợ lưu trữ và phát nội dung nghe nhìn ngoại tuyến bằng IndexedDB. Có thể lưu trữ nội dung trên bất kỳ trình duyệt nào. Dung lượng lưu trữ giấy phép tuỳ thuộc vào khả năng hỗ trợ trình duyệt.

Bạn có thể xem 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, để 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ài đặt các polyfill và kiểm tra xem trình duyệt có hỗ trợ không. Sau khi trình duyệt xác nhận khả năng hỗ trợ Shaka Player, tập lệnh sẽ tạo đối tượng Player để gói phần tử nội dung đa phương tiện, theo dõi lỗi, sau đó tải tệp kê khai. Shaka Player sẽ tiếp quản trò chơi từ đó.

Khi dùng Shaka, bạn sẽ cần tự lưu trữ và mã hoá các tệp nội dung nghe nhìn. 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. Có thể bạn sẽ muốn giảm tải phần này sang một dịch vụ như Zencoder, Amazon Elastic encryption hoặc Google Transcoder API để tự động hoá các công việc lặp lại và tăng tốc quá trình này.

Điều tuyệt vời là Shaka Player còn 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à Shaka Packager. Tính năng này có thể chuẩn bị và đóng gói nội dung nghe nhìn để phát trực tuyến mà bạn đã tìm hiểu trước đó trong phần Chuyển đổi nội dung nghe nhìnMã 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ể xem xét JW Player, nhưng xin 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 hiển thị kèm theo hình mờ và một phiên bản thương mại.

JW Player hỗ trợ phát trực tuyến bằng MPEG-DASH (chỉ dành cho 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ó API và SDK được ghi lại đầy đủ. 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ì tính năng nhúng video trên YouTube thường sẽ là lựa chọn miễn phí tốt nhất.

Video.js

Theo trang web của họ, Video.js được tạo từ nền tảng cho thế giới HTML5. Chế độ 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. Giao diện này hỗ trợ phát video trên máy tính và thiết bị di động, đồng thời có giao diện đẹp mắt ở mọi nơi nhờ có 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 Nhanh 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 sẽ cần phải lưu trữ và mã hoá video của mình. Tuy nhiên, một điểm khác biệt nằm ở hệ thống trình bổ trợ, nơi bạn có thể làm những việc như phát video trên 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, bài viết này chỉ đề cập đến những khái niệm cơ bản về những gì 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 và cách bạn dự định lưu trữ và 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ó 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 yếu tố nào khác cần cân nhắc. Hãy nghiên cứu và nhờ mọi người trong mạng lưới của bạn đưa ra đề xuất. Có rất nhiều tuỳ chọn tuyệt vời khác và trước khi đưa ra bất kỳ lựa chọn nào, hãy dành thời gian để chọn một tuỳ 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 suốt vòng đời dự án.

Tiếp theo, bạn sẽ tìm hiểu về PWA với 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 đi kèm với việc 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ý phần việc nặng nhọc.