close

Guía de DPlayer: Integrar y configurar vídeos MP4, HLS y FLV

¿Qué es DPlayer?

DPlayer es un reproductor de vídeo de código abierto potente y flexible. Es compatible no solo con formatos de vídeo comunes como MP4, sino también con transmisiones HLS y FLV, lo que lo hace ideal para la reproducción de vídeo en directo. DPlayer destaca por su interfaz minimalista y personalizable, y su función integrada de "danmaku"(comentarios flotantes).

Una guía detallada para usar DPlayer

Para utilizar DPlayer, debes integrar la biblioteca y todas las dependencias necesarias y luego configurar el reproductor.

Paso 1: Obtenga las bibliotecas necesarias

Usar una CDN es la forma más rápida de obtener estas bibliotecas. DPlayer detectará y usará automáticamente las bibliotecas dependientes si las incluye en su página.

  • Para MP4(predeterminado):

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

Paso 2: Crear HTML y configurar el reproductor

Después de integrar las bibliotecas, puedes crear un <div>elemento para mostrar el video y luego configurar DPlayer con propiedades 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>

Explicación detallada de las propiedades

Propiedades comunes(aplicables a todos los tipos de vídeo)

  • containerElemento DOM donde se renderizará DPlayer. Obligatorio.

  • autoplay: trueo false. Reproduce automáticamente el vídeo cuando se carga la página.

  • theme: Código de color hexadecimal(p. ej., '#FADFA3'). Establece el color de acento del reproductor.

  • lang:El idioma de la interfaz de usuario, por ejemplo, 'en'para inglés.

  • loop: trueo false. Reproduce el vídeo en bucle una vez finalizado.

  • hotkey: trueo false. Habilita atajos de teclado(por ejemplo, barra espaciadora para reproducir/pausar).

  • preload: 'auto', 'metadata', o 'none'. Cómo el navegador precarga el video.

    • 'auto':Precarga el vídeo completo.

    • 'metadata':Solo precarga metadatos(duración, dimensiones).

    • 'none':No precarga nada.

  • screenshot: trueo false. Permite a los usuarios tomar capturas de pantalla del vídeo.

  • video.url:La ruta a su archivo de vídeo.

  • video.pic:La ruta a la imagen en miniatura.

  • video.thumbnails:La ruta a un sprite en miniatura para la barra de búsqueda.

Propiedades para HLS y FLV

Estos tipos de vídeo requieren bibliotecas externas para funcionar. DPlayer las utiliza automáticamente, pero también puedes personalizar su comportamiento mediante la customTypepropiedad.

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

    • 'mp4':Predeterminado, se puede omitir.

    • 'hls':Para .m3u8videos.

    • 'flv':Para .flvvideos.

  • video.customType:Un objeto que le permite personalizar la lógica de procesamiento para cada tipo de video.

    • Ejemplo con HLS: El código interno customType.hlscrea una Hlsinstancia y la asocia al elemento de DPlayer <video>. Esto resulta útil para gestionar casos especiales o para obtener mayor control sobre el flujo HLS.

    • Ejemplo con FLV: De manera similar, este código crea un flvPlayery lo adjunta al <video>elemento para manejar la transmisión FLV.

Con estas propiedades, puede crear un reproductor de video potente y altamente personalizable para cualquier necesidad, desde videos simples hasta transmisiones en vivo.