close

Руководство по DPlayer: встраивание и настройка видео MP4, HLS, FLV

Что такое DPlayer?

DPlayer — мощный и гибкий видеоплеер с открытым исходным кодом. Он поддерживает не только распространённые видеоформаты, такие как MP4, но также обрабатывает потоки HLS и FLV, что делает его идеальным для воспроизведения живого видео. DPlayer выделяется минималистичным настраиваемым интерфейсом и встроенной функцией «данмаку»(плавающих комментариев).

Подробное руководство по использованию DPlayer

Чтобы использовать DPlayer, вам необходимо встроить библиотеку и все необходимые зависимости, а затем настроить проигрыватель.

Шаг 1: Получите необходимые библиотеки

Использование CDN — самый быстрый способ получить эти библиотеки. DPlayer автоматически обнаружит и использует зависимые библиотеки, если вы добавите их на свою страницу.

  • Для MP4(по умолчанию):

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

  • Для 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>

  • Для 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>

Шаг 2: Создайте HTML и настройте плеер

После встраивания библиотек вы можете создать <div>элемент для отображения видео, а затем настроить DPlayer с определенными свойствами.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Advanced DPlayer Example</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>How to Use DPlayer</h1>  
  
    <div id="dplayer-container-1"></div>  
  
    <hr>  
  
    <div id="dplayer-container-2"></div>  
  
    <hr>  
  
    <div id="dplayer-container-3"></div>  
  
    <script>  
        // DPlayer configuration for MP4  
        const dpMP4 = new DPlayer({  
            container: document.getElementById('dplayer-container-1'),  
            autoplay: false,  
            lang: 'en',  
            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'  
            }  
        });  
  
        // DPlayer configuration for HLS  
        const dpHLS = new DPlayer({  
            container: document.getElementById('dplayer-container-2'),  
            autoplay: true,  
            lang: 'en',  
            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);  
                    }  
                }  
            }  
        });  
  
        // DPlayer configuration for FLV  
        const dpFLV = new DPlayer({  
            container: document.getElementById('dplayer-container-3'),  
            autoplay: true,  
            lang: 'en',  
            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>

Подробное объяснение свойств

Общие свойства(применимы ко всем типам видео)

  • container: Элемент DOM, в котором будет отображаться DPlayer. Обязательно.

  • autoplay: trueили false. Автоматически воспроизводит видео при загрузке страницы.

  • theme: Шестнадцатеричный код цвета(например, '#FADFA3'). Устанавливает акцентный цвет проигрывателя.

  • lang: Язык пользовательского интерфейса, например, 'en'английский.

  • loop: trueили false. Зацикливает видео после его окончания.

  • hotkey: trueили false. Включает сочетания клавиш(например, пробел для воспроизведения/паузы).

  • preload: 'auto', 'metadata', или 'none'. Как браузер предварительно загружает видео.

    • 'auto': Предварительно загружает все видео.

    • 'metadata': Только предварительная загрузка метаданных(длительность, размеры).

    • 'none': Ничего не загружает предварительно.

  • screenshot: trueили false. Позволяет пользователям делать снимки экрана видео.

  • video.url: Путь к вашему видеофайлу.

  • video.pic: Путь к миниатюре изображения.

  • video.thumbnails: Путь к миниатюре спрайта для панели поиска.

Свойства для HLS и FLV

Для работы этих типов видео требуются внешние библиотеки. DPlayer автоматически их использует, но вы также можете настроить их поведение с помощью customTypeсвойства.

  • video.type: Указывает тип видео.

    • 'mp4': По умолчанию, может быть опущен.

    • 'hls': Для .m3u8видео.

    • 'flv': Для .flvвидео.

  • video.customType: Объект, позволяющий настраивать логику обработки для каждого типа видео.

    • Пример с HLS: код внутри customType.hlsсоздаёт Hlsэкземпляр и прикрепляет его к элементу DPlayer <video>. Это полезно для обработки особых случаев или для получения большего контроля над потоком HLS.

    • Пример с FLV: Аналогично этот код создает flvPlayerи прикрепляет его к <video>элементу для обработки потока FLV.

Используя эти свойства, вы можете создать мощный и легко настраиваемый видеоплеер для любых нужд: от простых видеороликов до прямых трансляций.