DPlayer - 一款在網頁中使用的輕量級 HTML5 彈幕視頻播放器

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年10月12日 10:51 本文熱度 1641

一款開源的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協同辦公管理系統。

日韩欧美国产精品免费一二-日韩欧美国产精品亚洲二区-日韩欧美国产精品专区-日韩欧美国产另-日韩欧美国产免费看-日韩欧美国产免费看清风阁