close

Hướng dẫn sử dụng JW Player: Nhúng và Cấu hình Video

JW Player là gì?

JW Player là một trình phát video đa nền tảng, cho phép bạn nhúng và phát video một cách chuyên nghiệp. Nó hỗ trợ nhiều định dạng video khác nhau và có thể tùy chỉnh cao, từ giao diện người dùng đến các tính năng phát lại nâng cao.

Cách lấy thư viện JW Player

Bạn có hai cách để có được thư viện JW Player: sử dụng CDN hoặc tải xuống và lưu trữ cục bộ.

1. Sử dụng CDN (Được khuyến khích)

Sử dụng CDN (Content Delivery Network) là cách đơn giản và nhanh nhất để tích hợp JW Player. CDN giúp tải tệp tin nhanh hơn vì nó được lưu trữ trên nhiều máy chủ trên khắp thế giới.

Để sử dụng CDN, bạn chỉ cần thêm đoạn mã sau vào phần <head> của trang web. Lưu ý: Bạn cần thay <YOUR_LICENSE_KEY> bằng khóa cấp phép của riêng bạn.

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Tải xuống và lưu trữ cục bộ

Nếu bạn muốn kiểm soát hoàn toàn tệp tin và không phụ thuộc vào kết nối mạng, bạn có thể tải JW Player về và lưu trữ trên máy chủ của mình.

  1. Truy cập trang web chính thức của JW Player.

  2. Đăng ký hoặc đăng nhập để có tài khoản (có gói dùng thử miễn phí).

  3. Tìm và tải xuống thư viện từ bảng điều khiển tài khoản của bạn.

  4. Giải nén tệp .zip và tải thư mục lên máy chủ của bạn.

Hướng dẫn sử dụng chi tiết JW Player

Sau khi đã có thư viện, bạn có thể bắt đầu nhúng JW Player vào trang web của mình.

1. Tạo tệp HTML và nhúng JW Player

Dưới đây là một ví dụ HTML đầy đủ. Nếu bạn dùng CDN, hãy thay thế <script src="..."> bằng dòng mã CDN đã nêu ở trên. Nếu bạn dùng thư viện tải xuống, hãy đảm bảo đường dẫn đến tệp jwplayer.js là chính xác.

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ JW Player</title>
    <script src="js/jwplayer.js"></script>
</head>
<body>

    <h1>Hướng dẫn sử dụng JW Player</h1>

    <div id="video-container"></div>

    <script>
        // Khởi tạo và cấu hình JW Player
        jwplayer("video-container").setup({
            // Đường dẫn đến tệp video của bạn
            "file": "videos/my-video.mp4",
            
            // Đường dẫn đến ảnh thumbnail của video
            "image": "images/my-video-thumbnail.jpg",
            
            // Kích thước của trình phát
            "width": "640",
            "height": "360",
            
            // Tự động phát khi trang tải xong
            "autostart": false,
            
            // Hiển thị thanh điều khiển
            "controls": true
        });
    </script>

</body>
</html>

2. Giải thích chi tiết về đoạn mã

  • <script src="...">: Dòng này liên kết thư viện JW Player với trang web của bạn.

  • <div id="video-container"></div>: Đây là nơi video sẽ hiển thị. Bạn có thể đặt bất kỳ tên id nào bạn muốn, nhưng hãy đảm bảo nó khớp với tên trong hàm jwplayer().

  • jwplayer("video-container").setup({...}): Đây là nơi bạn khởi tạo và cấu hình JW Player.

    • "file": Đường dẫn đến tệp video của bạn.

    • "image": Đường dẫn đến ảnh thumbnail của video.

    • "width" và "height": Đặt kích thước cho trình phát. Bạn cũng có thể dùng "100%" để trình phát tự điều chỉnh.

    • "autostart": Đặt thành true nếu bạn muốn video tự động phát.

    • "controls": Đặt thành false nếu bạn muốn ẩn thanh điều khiển.

Với những hướng dẫn trên, bạn có thể dễ dàng bắt đầu sử dụng JW Player để phát video trên trang web của mình một cách hiệu quả.