Hướng dẫn sử dụng Plyr phát Audio, Video

Trong quá trình làm website nghe Radio Online, mình gặp khó khăn khi không tìm được player hỗ trợ định dạng HLS (M3U8), các player miễn phí trên mạng như jPlayer, Muses chỉ hỗ trợ MP3, AAC, OGG. Mình có thử sử dụng player của Wowza nhưng từ 31/8/2021 nó chấm dứt hỗ trợ. Rất may là tìm được Plyr, nó hỗ trợ play tốt các link M3U8, trên mạng thấy ít bài viết về player Plyr, nên tiện làm mình dịch những chỗ cần thiết từ Document của Plyr cho ai cần tham khảo. Ok bắt đầu nhé.

Sơ qua về Plyr

Plyr là một trình phát đa phương tiện HTML5, hỗ trợ cả audio và video. Plyr có cấu trúc code đơn giản, nhẹ, có khả năng tùy biến cao, hỗ trợ hầu hết các trình duyệt hiện tại như Chrome, Firefox, Safari, Edge.

Tính năng

  • 📼 HTML Video & Audio, YouTube & Vimeo – Hỗ trợ nhiều nguồn đầu vào.
  • 📖 Accessible – Hỗ trợ hiển thị đa phụ đề.
  • 🔧 Customizable – Có khả năng tùy biến giao diện player theo ý thích.
  • 😎 Clean HTML – Code dễ hiểu.
  • 📱 Responsive – Kích thước thích ứng với màn hình.
  • 💵 Monetization – Hỗ trợ kiếm tiền từ video.
  • 📹 Streaming – Hỗ trợ streaming qua giao thức hls.js, Shaka và dash.js (Cái này ít có player free nào hỗ trợ).
  • 🎛 API – Hỗ trợ điều khiển qua API một số chức năng như tua, điều chỉnh âm lượng, tìm kiếm.
  • 🔎 Fullscreen – Hỗ trợ hiển thị full màn hình
  • ⌨️ Shortcuts – Hỗ trợ phím tắt
  • 🖥 Picture-in-Picture – Hỗ trợ tính năng Picture-in-Picture (Video thu nhỏ xuống góc khi chuyển qua ứng dụng khác)
  • 🏎 Speed controls – Hỗ trợ thay đổi tốc độ phát
  • 👌 Preview thumbnails – Hỗ trợ hiển thị ảnh đại diện
  • 🤟 No frameworks – được viết bằng “vanilla” ES6 JavaScript, không yêu cầu jQuery.

Read More →
Replies: 0 / Share: