DPlayer - 一款在网页中使用的轻量级 HTML5 弹幕视频播放器

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2024年10月12日 10:51 本文热度 282

一款开源的HTML5 弹幕视频播放器——DPlayer。

它是一款轻量级视频播放器，特别适用于在网页中嵌入视频播放功能。具有简洁的界面、丰富的功能以及易于集成的特点。

支持多种视频格式，包括 MP4、WebM 等，并且提供了丰富的 API 和配置选项，使开发者可以根据自己的需求进行定制。

还支持弹幕功能，可以让用户在观看视频的同时发送弹幕消息，增强了用户的互动体验。

下面我们一起实现一个播放器吧！

安装 DPlayer

安装就比较简单了，支持 CDN、包管理工具（npm/yarn/pnpm）方式安装。通过简单的 CDN 方式安装。

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

使用 npm 和 yarn 安装

npm install dplayer
// 或
yarn add dplayer

如何使用 DPlayer ？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DPlayer DEMO</title>
  </head>
  <style>
    /* 容器样式 */
    .dplayer {
      width: 923px;
      height: 526px;
    }
  </style>
  <body>
    <!-- 视频的容器 -->
    <div id="dplayer" class="dplayer"></div>
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
    <script>
      const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: true, // 开启截屏
        video: {
          url: './source/480P.mp4', // 视频地址，本地视频或链接地址
          pic: './picture/cover_img.jpg', // 封面
          type: 'auto', // 类型
        },
      })
    </script>
  </body>
</html>

获取 DEMO 请关注公众号：猿镇，回复：demo。

视频效果

属性介绍

全局配置

视频配置

字幕配置

弹幕配置

API

生命周期 API

播放 API

弹幕 API

状态 API

全屏 API

事件

拓展

其他同类型的开源 HTML5 播放器

Video.js 36.9K

Video.js是一个流行的开源HTML5视频播放器，提供丰富的定制选项、易用的API和插件系统，支持多种视频格式，适用于在网页中嵌入各种类型的视频内容。

mediaElement.js 8.1K

MediaElement.js是一个开源的HTML5视频和音频播放器库，提供跨浏览器支持、可定制皮肤和控件、响应式设计和丰富的JavaScript API。

xgplayer 7.5K

由字节跳动开源的 Web 视频播放器。它基于组件化的原则设计了独立的、可拆分的 UI 组件。除了在 UI 层面上的灵活性，它在功能上也有大胆的改进：它摆脱了对视频加载、缓冲和格式支持的依赖。特别是在处理 mp4 格式时，它可以进行分段加载，即使不支持流式传输的 mp4 格式也能实现无缝切换、加载控制和节省流量。西瓜播放器还集成了对 FLV、HLS 和 Dash 格式的点播和直播支持。

该文章在 2024/10/12 10:51:32 编辑过

关键字查询

html

视频

网页

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。