PDPlayerKit (JavaScript Library)

PDPlayerKit 是一個模組化的 JavaScript 播放器，支持嵌入式 HTML5、YouTube 和 Vimeo 播放器，具備高度自定義的控制面板、風格主題，並支援多媒體格式。

特點

• 多媒體支持：支持 HTML5 影片、YouTube 和 Vimeo 播放，音訊播放功能也已新增。
• 自定義控制面板：包括播放、暫停、音量調節、播放速率調整等功能，並提供多種風格主題選擇。
• 多風格主題：內建多種預設風格，使用者可依據需求自由切換（如 Minimal、Classic、Retro、Simple 等）。
• 多種版本支持：提供 ESM 和普通版本，方便用於不同開發環境。
• 無依賴：已排除 PDRenderKit 的依賴。
• 授權從 GPL 3.0 改為 MIT
• 使用 Google Icons 圖示黨做按鈕。
• 使用 pixabay.com 影音資源做範例。
• 可在 此處 預覽。

安裝方式

• 從 npm 安裝

  npm i pdplayerkit

• 從 CDN 引入

  • 引入 PDPlayerKit 套件

    <script src="https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.js"></script>

  • Module 版本

    import { player as PDPlayer } from "https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.module.js";

使用方法

• 初始化 editor 和 viewer

  const dom = new PDPlayer({
      // 選填：指定元件替換為播放器（元件的 ID）
      // 若未指定，需手動將 dom.body 加入至視圖中
      // id: "元件 ID",
  
  
      // 必填：媒體來源設定，以下選項中僅能選擇一項
      video: "[影片位置]",
      // audio: "[音訊位置]",
      // vimeo: "[Vimeo ID]",
      // youtube: "[YouTube ID]"
  
      // 選填：播放設置
      option: {   
          // 是否顯示滑桿，預設 true
          showThumb: true,
  
          // 控制面板外觀風格，例如 "minimal" 或 "classic"
          panelType: "[風格選擇]",
  
          // 控制面板按鈕，依需求選擇顯示的功能
          panel: [
              "play", "progress", "time", "timeMini", 
              "volume", "volumeMini", "rate", "full"
          ],
          // 播放器預設音量
          volume: 100,
          // 播放器預設靜音
          mute: false
      },
  
      // 選填：事件監聽器，可監聽播放過程中的特定事件
      when: {
          ready: function () {
              console.log("播放器準備完成");
          },
          playing: function () {
              console.log("播放中");
          },
          pause: function () {
              console.log("暫停");
          },
          end: function () {
              console.log("播放結束");
          },
          destroyed: function () {
              console.log("已移除");
          }
      }
  });
  
  // 若無指定元件，需手動將播放器加入至 DOM 中
  (...).appendChild(dom.body);
  
  // 移除元件
  // dom.destory();

開發者

授權條款

本專案依據 MIT 授權使用。

©️ 2023 邱敬幃 Pardn Chiu