Plyr – Thư viện HTML 5 Video Player | Thầy Hiếu Dạy Khoa Học

hi xin chào mọi người nha hôm nay mình xin giới thiệu một thư viện, mà mình thấy khá hay. Rất phù hợp cho các website về phim hoặc chia sẻ video. Đó là thư viện Plyr – Một thư viện video player dựa trên ngôn ngữ HTML 5 + CSS 3 + Javascript

Các bạn có thể xem demo tại đây Demo: plyr.io
Github Source: https://github.com/sampotts/plyr

Các tính năng

chính Hỗ trợ nhiều định dạng HTML Video & Audio, YouTube & Vimeo…
Hõ trợ VTT chú thích và trình đọc màn hình
Customizable – Dễ dàng customize theo ý bạn
Clean HTML
Hỗ trợ Responsive – làm việc với bất kỳ kích thước màn hình
Monetization – hỗ trợ kiếm tiền từ video của bạn
Streaming – hỗ trợ hls.js, Shaka và dash.js streaming playback
Hõ trợ API
Fullscreen
Shortcuts Keyboard
Picture-in-Picture
Playsinline – supports the playsinline attribute
Speed controls – adjust speed on the fly
Multiple captions – Hõ trợ nhiều tiêu đề
i18n – Hỗ trợ đã ngôn ngữ
Preview thumbnails – ảnh xem trước
No frameworks – written in “vanilla” ES6 JavaScript, no jQuery required
Sass – to include in your build processes

Tích hợp Plyr vào project

Để tích hợp chúng ta cần thêm đoạn javascript sau vào các dự án website của chúng ta:

<script src="path/to/plyr.js"></script>
<script>
  const player = new Plyr('#player');
</script>

Sử dụng HTML 5 - Video

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

Sử Dụng HTML 5 - Aidio

<audio id="player" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3" />
  <source src="/path/to/audio.ogg" type="audio/ogg" />
</audio>

Embed Youtube

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Embed - Vimeo

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Plyr – Thư viện HTML 5 Video Player