close

Guia DPlayer: Incorpore e configure vídeos MP4, HLS e FLV

O que é DPlayer?

O DPlayer é um reprodutor de vídeo de código aberto, poderoso e flexível. Ele suporta não apenas formatos de vídeo comuns, como MP4, mas também fluxos HLS e FLV, tornando-o ideal para reprodução de vídeo ao vivo. O DPlayer se destaca por sua interface minimalista e personalizável e um recurso integrado de "danmaku"(comentários flutuantes).

Um guia detalhado para usar o DPlayer

Para usar o DPlayer, você precisa incorporar a biblioteca e quaisquer dependências necessárias e, em seguida, configurar o player.

Etapa 1: Obtenha as bibliotecas necessárias

Usar uma CDN é a maneira mais rápida de obter essas bibliotecas. O DPlayer detectará e usará automaticamente as bibliotecas dependentes se você incluí-las na sua página.

  • Para MP4(padrão):

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

  • Para 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>

  • Para 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>

Etapa 2: Crie o HTML e configure o player

Depois de incorporar as bibliotecas, você pode criar um <div>elemento para exibir o vídeo e então configurar o DPlayer com propriedades específicas.

<!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>

Explicação detalhada das propriedades

Propriedades comuns(aplicáveis ​​a todos os tipos de vídeo)

  • container: O elemento DOM onde o DPlayer será renderizado. Obrigatório.

  • autoplay: trueou false. Reproduz o vídeo automaticamente quando a página é carregada.

  • theme: Código de cor hexadecimal(ex.: '#FADFA3'). Define a cor de destaque do player.

  • lang: O idioma da interface do usuário, por exemplo, 'en'para inglês.

  • loop: trueou false. Repete o vídeo após seu término.

  • hotkey: trueou false. Habilita atalhos de teclado(por exemplo, barra de espaço para reproduzir/pausar).

  • preload: 'auto', 'metadata', ou 'none'. Como o navegador pré-carrega o vídeo.

    • 'auto': Pré-carrega o vídeo inteiro.

    • 'metadata': Pré-carrega apenas metadados(duração, dimensões).

    • 'none': Não pré-carrega nada.

  • screenshot: trueou false. Permite que os usuários façam capturas de tela do vídeo.

  • video.url: O caminho para seu arquivo de vídeo.

  • video.pic: O caminho para a imagem em miniatura.

  • video.thumbnails: O caminho para um sprite em miniatura para a barra de busca.

Propriedades para HLS e FLV

Esses tipos de vídeo requerem bibliotecas externas para funcionar. O DPlayer os utiliza automaticamente, mas você também pode personalizar seu comportamento por meio da customTypepropriedade .

  • video.type: Especifica o tipo de vídeo.

    • 'mp4': Padrão, pode ser omitido.

    • 'hls': Para .m3u8vídeos.

    • 'flv': Para .flvvídeos.

  • video.customType: Um objeto que permite personalizar a lógica de processamento para cada tipo de vídeo.

    • Exemplo com HLS: O código customType.hlscria uma Hlsinstância e a anexa ao elemento do DPlayer <video>. Isso é útil para lidar com casos especiais ou obter mais controle sobre o fluxo HLS.

    • Exemplo com FLV: Da mesma forma, este código cria um flvPlayere o anexa ao <video>elemento para manipular o fluxo FLV.

Com essas propriedades, você pode criar um player de vídeo poderoso e altamente personalizável para qualquer necessidade, desde vídeos simples até transmissões ao vivo.