Full Stack Developer

Aug. 30, 2020, 6:05 p.m.

8 thư viện player HTML5 có thể phát CMAF

Blog này dành cho những kỹ sư làm việc với player. streaming hoặc ứng dụng VOD video.

Khi bạn cố gắng phát một video các bạn có thể dùng thẻ <video> của HTML5. Bạn hoàn toàn có thể kiểm soát bằng javascript thông thường, tuy nhiên, với những yêu cầu kỹ thuật và những tính năng cao hơn bắt buộc bạn phải nghĩ đến những thư viện player cho HTML5.

Đây là một số tổng hợp về những thư viện hiện tại tính tới thời điểm tôi viết bài 8/2020

Video.js có số lượng sao cao nhất. Nó dường như được sử dụng trên khá nhiều trang web. (Hơn 450.000 trang web theo trang web chính thức).

Plyr cũng có rất star. Nó dường như có nhiều tính năng nổi bật và đang rất được tích cực đóng góp và phát triển.


Shaka Player là một thư viện của google được google giới thiệu tại GOOGLE I/O 2019.

JW Player đã rất áp đảo khi so sánh Google Proprietary cho ba loại thư viện độc quyền.

Ngoài ra còn có NexPlayer và bitmovin Player.

Plyr

Dưới đây là tổng quan nhanh về các tính năng của Plyr.

Nguồn hình ảnh tham khảo : https://plyr.io/

  • Hỗ trợ đầy đủ cho phụ đề VTT và trình đọc màn hình
  • Custom sử dụng markup
  • Responsive
  • Hỗ trợ phát lại trực tuyến bằng hls.js, Shaka, dash.js
  • Native fullscreen
  • Hỗ trợ phím tắt
  • Hình ảnh trong ảnh
  • Speed controller function
  • Multiple caption
  • Support đa ngôn ngữ
  • Xem trước hình thu nhỏ trên thanh tìm kiếm
  • No framework, no jQuery

Thumbnail preview là một tính năng không có ở video.js. Ngược lại, DRM có sẵn trong video.js như một plugin chính thức nhưng không có trong Plyr.

Hỗ trợ CMAF (Common Media Application Format) 

CMAF là một định dạng mới để phân phối video có độ trễ thấp sử dụng fMP4 (MP4 bị phân mảnh), Mã hóa truyền phân đoạn HTTP và HLS / MPEG-DASH.

Với phân phối trực tiếp HLS thông thường, độ trễ từ 10 giây trở lên thường được tạo ra, nhưng bằng cách tối ưu hóa CMAF, bộ mã hóa và đường truyền, nó sẽ là 2-3 giây.

Công ty TNHH Truyền hình Fuji nhận thấy thời gian giao hàng trễ cực thấp bằng AWS để phân phối World Cup Valley 2019


Tôi muốn biết liệu Plyr có hỗ trợ định dạng phân phối video mới CMAF hay không, nhưng không có mô tả rõ ràng trên trang web chính thức rằng nó hỗ trợ CMAF.

Để dùng thử, tôi đã tạo video ở định dạng CMAF HLS bằng AWS Media Convert và xác minh xem video đó có thể phát được bằng Plyr hay không. (Mặc dù nó là VOD).

Sample Code

Không chỉ Plyr mà cả hls.js cũng sẽ được sử dụng.

plyr_sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Plyr sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="//cdn.plyr.io/static/icons/favicon.ico" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/plyr/3.3.6/plyr.css" />
</head>
<body>
<div>
<div id="container" style="width:80%; margin:auto;">
<h1>Plyr Sample</h1>
<video controls crossorigin playsinline id="player">
<!-- iOSはネイティブでHLS対応のためsourceを使用。その他はhls.jsで再生。 -->
<source
src="https://xxxx/xxxx.m3u8"
type="application/x-mpegURL"
size="576"
/>
</video>
</div>
</div>
<script src="//cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/plyr/3.3.6/plyr.min.js"></script>
<script type="text/javascript">
var video = document.querySelector('video');
if (Hls.isSupported()) { //iOS以外はtrue(=MSEをサポート)
var hls = new Hls();
hls.loadSource('https://xxxx/xxxx.m3u8');
hls.attachMedia(video);
}
var player = new Plyr(video, {});
</script>
</body>
</html>

Tôi đã có thể chơi CMAF HLS với các cách kết hợp sau

Khi tạo CMAF HLS bằng MediaConvert, phim được chia thành các tệp .cmfv và các tệp âm thanh là tệp .cmfa (cả hai nội dung đều là fMP4) và chúng được tham chiếu từ m3u8.

Nếu bạn nhìn vào Công cụ dành cho nhà phát triển, bạn sẽ thấy các tệp này được tải và phát.

Tổng kết

Vì vậy, tôi đã có thể chơi CMAF HLS trên trang web bằng Plyr và hls.js.

Có một câu chuyện rằng CMAF vẫn chưa được phía trình phát hỗ trợ, nhưng chúng tôi đã có thể chơi nó trên nhiều nền tảng bằng trình phát OSS.

Khuyến khích người viết

Bằng cách chia sẻ bài viết của :Jack.

0
Full Stack Developer

Aug. 30, 2020, 6:05 p.m.

0 Comment

Register for News