close

Hướng dẫn DPlayer: Nhúng và Cấu hình Video MP4, HLS, FLV

DPlayer là gì?

DPlayer là một trình phát video mã nguồn mở, mạnh mẽ và linh hoạt. Nó không chỉ hỗ trợ các định dạng video phổ biến như MP4 mà còn có thể xử lý các luồng HLS và FLV, lý tưởng cho việc phát trực tiếp. DPlayer nổi bật với giao diện tối giản, dễ tùy chỉnh và tính năng "danmaku" (bình luận trôi nổi).

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

Để sử dụng DPlayer, bạn cần nhúng thư viện và các tệp phụ thuộc (nếu cần), sau đó cấu hình trình phát.

Bước 1: Lấy các thư viện cần thiết

Sử dụng CDN là cách nhanh nhất để có các thư viện này. DPlayer sẽ tự động phát hiện và sử dụng các thư viện phụ nếu bạn nhúng chúng.

  • Cho MP4 (mặc định):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

  • Cho HLS (.m3u8):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  • Cho FLV (.flv):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>​

Bước 2: Tạo HTML và cấu hình trình phát

Sau khi nhúng thư viện, bạn có thể tạo một thẻ <div> để hiển thị video và sau đó cấu hình DPlayer với các thuộc tính cụ thể.

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ DPlayer Nâng Cao</title>
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>

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

    <div id="dplayer-container-1"></div>

    <hr>

    <div id="dplayer-container-2"></div>

    <hr>

    <div id="dplayer-container-3"></div>

    <script>
        // Cấu hình DPlayer cho MP4
        const dpMP4 = new DPlayer({
            container: document.getElementById('dplayer-container-1'),
            autoplay: false,
            lang: 'vi',
            loop: true,
            hotkey: true,
            preload: 'auto',
            screenshot: true,
            video: {
                url: 'https://example.com/videos/my-video.mp4',
                pic: 'https://example.com/images/my-video-thumbnail.jpg',
                thumbnails: 'https://example.com/images/video-thumbnails.jpg',
                type: 'mp4'
            }
        });

        // Cấu hình DPlayer cho HLS
        const dpHLS = new DPlayer({
            container: document.getElementById('dplayer-container-2'),
            autoplay: true,
            lang: 'vi',
            theme: '#ff6666',
            loop: false,
            hotkey: true,
            preload: 'metadata',
            video: {
                url: 'https://example.com/live/my-stream.m3u8',
                type: 'hls',
                customType: {
                    hls: function (video, player) {
                        const hls = new Hls();
                        hls.loadSource(video.src);
                        hls.attachMedia(video);
                    }
                }
            }
        });

        // Cấu hình DPlayer cho FLV
        const dpFLV = new DPlayer({
            container: document.getElementById('dplayer-container-3'),
            autoplay: true,
            lang: 'vi',
            theme: '#0077c2',
            loop: false,
            hotkey: true,
            preload: 'auto',
            video: {
                url: 'https://example.com/live/my-stream.flv',
                type: 'flv',
                customType: {
                    flv: function (video, player) {
                        const flvPlayer = flvjs.createPlayer({
                            type: 'flv',
                            url: video.src,
                        });
                        flvPlayer.attachMediaElement(video);
                        flvPlayer.load();
                    }
                }
            }
        });
    </script>
</body>
</html>

Giải thích chi tiết các thuộc tính

Thuộc tính chung (áp dụng cho tất cả các loại video)

  • container: Phần tử DOM mà DPlayer sẽ được hiển thị. Bắt buộc.

  • autoplay: true hoặc false. Tự động phát video khi trang tải xong.

  • theme: Mã màu Hex (ví dụ: '#FADFA3'). Đặt màu chủ đạo cho trình phát.

  • lang: Ngôn ngữ giao diện, ví dụ 'vi' cho tiếng Việt hoặc 'en' cho tiếng Anh.

  • loop: true hoặc false. Lặp lại video sau khi kết thúc.

  • hotkey: true hoặc false. Cho phép sử dụng phím tắt (ví dụ: phím cách để phát/tạm dừng).

  • preload: 'auto', 'metadata', hoặc 'none'. Cách trình duyệt tải trước video.

    • 'auto': Tải toàn bộ video.

    • 'metadata': Chỉ tải siêu dữ liệu (thời lượng, kích thước).

    • 'none': Không tải trước.

  • screenshot: true hoặc false. Cho phép người dùng chụp ảnh màn hình video.

  • video.url: Đường dẫn đến tệp video.

  • video.pic: Đường dẫn đến ảnh thumbnail.

  • video.thumbnails: Đường dẫn đến ảnh thumbnail nhỏ cho thanh tìm kiếm.

Thuộc tính đặc biệt cho HLS và FLV

Các loại video này yêu cầu các thư viện bên ngoài để xử lý. DPlayer tự động sử dụng chúng, nhưng bạn cũng có thể tùy chỉnh cách hoạt động qua thuộc tính customType.

  • video.type: Chỉ định loại video.

    • 'mp4': Mặc định, không cần thuộc tính này.

    • 'hls': Cho video .m3u8.

    • 'flv': Cho video .flv.

  • video.customType: Một đối tượng cho phép bạn tùy chỉnh logic xử lý của từng loại video.

    • Ví dụ với HLS: Đoạn mã trong customType.hls tạo một instance Hls và gắn nó vào phần tử <video> của DPlayer. Điều này hữu ích khi bạn cần xử lý các trường hợp đặc biệt hoặc muốn kiểm soát luồng phát HLS.

    • Ví dụ với FLV: Tương tự, đoạn mã này tạo một flvPlayer và gắn nó vào phần tử <video> để xử lý luồng FLV.

Với những thuộc tính này, bạn có thể tạo ra một trình phát video mạnh mẽ và tùy chỉnh cao, phù hợp với mọi nhu cầu từ video đơn giản đến phát trực tiếp.