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： DPlayer 渲染的 DOM 元素。必填。

  • 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 流。

利用这些属性，您可以创建一个功能强大且高度可定制的视频播放器，满足任何需求，从简单的视频到直播。