Share Nhúng video vào website với thư viện Video.js

filiallion · 12/25/2019

Tôi tiếp tục hướng dẫn các bạn sử dụng thư viện JavaScript để nhúng video vào website và ở bài viết này thì thư viện tôi giới thiệu đó là Video.js. Nếu so sánh về tốc độ thì Video.js không thể so sánh với JW Player, tuy nhiên Video.js lại cho các bạn toàn quyền sử dụng và không phụ thuộc nhà phát triển về sau. Nhưng nếu các bạn quan tâm về hiệu năng thì các bạn có thể tham khảo JW Player tại bài viết "Hướng dẫn nhúng video vào website với trình player chuyên nghiệp JW Player".

Thư viện Video.js tận dụng các tính năng video của HTML5 kèm thêm việc tuỳ biến giao diện cũng như bổ sung thêm một vài chức năng giúp cho video có thể chạy được trên nhiều trình duyệt web mà HTML5 mặc định không hỗ trợ hoặc hỗ trợ không đầy đủ. Ngoài ra, với Video.js các bạn còn có thể tích hợp thêm các plugin hỗ trợ được nhà phát triển cũng như cộng đồng xây dựng.

Việc sử dụng thư viện Video.js cũng đơn giản, trước tiên các bạn cần tải thư viện Video.js tại địa chỉ https://github.com/videojs/video.js và tích hợp vào website với nội dung mã lệnh HTML như sau:

HTML:

<link href="path/to/video-js.min.css" rel="stylesheet">
<script src="path/to/video.min.js"></script>

Bây giờ, các bạn nhúng video vào website với sự hỗ trợ của thư viện Video.js như sau:

HTML:

<video class="video-js" width="1280" height="720" poster="path/to/poster.jpg" controls>
    <source type="video/mp4" src="path/to/video.mp4">
    <source type="video/ogg" src="path/to/video.ogg">
</video>

Thư viện Video.js còn nhiều thuộc tính cấu hình khác, các bạn có thể tìm hiểu thêm tại địa chỉ https://videojs.com.

Share Nhúng video vào website với thư viện Video.js

filiallion

Administrator