Share Sử dụng thư viện Plyr để nhúng video vào website

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trong tất cả các trình player để nhúng video được tuỳ biến từ HTML5 tương tự như Video.js hay afterglow thì cũng phải kể đến Plyr. Theo đánh giá của tôi thì thư viện Plyr là hoàn hảo nhất trong việc tuỳ chỉnh HTML5 để chạy video bởi khả năng tuỳ chỉnh giao diện, bổ sung nhiều tính năng hấp dẫn tượng tự như player trên YouTube. Một trong các tính năng phải kể đến đó là khả năng thay đổi chất lượng xem video từ chất lượng bình thường, HD, FullHD hay các chất lượng cao hơn. Ngoài ra, khả năng hỗ trợ nhúng phụ đề cũng là một chức năng hay khác của Plyr, các bạn có thể xem qua demo của Plyr để biết thêm các tính năng hấp dẫn này.

Ngoài khả năng nhúng các video cục bộ, các bạn còn có thể nhúng video từ YouTube hay Vimeo mà không gặp bất kỳ khó khăn nào, mọi thứ vẫn hoạt động tốt trên các trình duyệt phổ biến hiện nay, kể cả trên điện thoại di động.

Các bạn tải thư viện Plyr tại địa chỉ https://github.com/sampotts/plyr và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/plyr.css" rel="stylesheet">
<script src="path/to/plyr.min.js"></script>
Tiêp theo, các bạn nhúng video bằng HTML5 như sau:
HTML:
<video id="plyr" width="1280" height="720" poster="path/to/poster.jpg" controls playsinline>
    <source type="video/mp4" src="path/to/video.mp4">
    <source type="video/ogg" src="path/to/video.ogg">
</video>
Cuối cùng, các bạn cài đặt thư viện Plyr như sau:
JavaScript:
var plyr = new Plyr('#plyr');
Các bạn có thể tìm hiểu thêm các tuỳ chọn cấu hình của Plyr tại địa chỉ https://github.com/sampotts/plyr.
 
Back
Top