DEV Community

Cover image for FlexPlyr: 模組化多風格播放器
邱敬幃 Pardn Chiu
邱敬幃 Pardn Chiu

Posted on

1

FlexPlyr: 模組化多風格播放器

原名:PDPlayerKit,自 2.2.4 版本起更名為 FlexPlyr
純 JavaScript 打造的模組化媒體播放器,支援 HTML5、YouTube、Vimeo,提供靈活主題與完整控制面板。

特點

多媒體播放

  • 支援多類型:可播放 HTML5 影片 / 音訊YouTubeVimeo
  • 兼容桌面與行動設備,支持 playsinline全螢幕模式 切換。

高度自定義控制面板

  • 自由定制按鈕:播放速率調整音量控制進度條 等功能按需配置。
  • 提供多種內建主題: (如 Minimal、Classic、Retro、Simple),方便自由選擇。

輕量與無依賴

  • 基於 原生 APIYouTube / Vimeo API,無需額外庫,開箱即用。
  • 完全移除 PDRenderKit 的依賴,減少耦合,提升使用便捷性。
  • 文件體積小於 數 KB,即使在行動設備上也能高效運行。

全面的事件監聽

  • 支持多種事件監聽: (如 ready、playing、pause、end),方便深度擴展。

安裝方式

從 npm 安裝

npm i @pardnchiu/flexplyr
Enter fullscreen mode Exit fullscreen mode

從 CDN 引入

引入 FlexPlyr 套件

<!--  2.2.4 版本以上 -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.js"></script>

<!-- 2.2.3 版本以下 -->
<script src="https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.js"></script>
Enter fullscreen mode Exit fullscreen mode

Module 版本

// 2.2.4 版本以上
import { FPlyr } from "https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.esm.js";

// 2.2.3 版本以下
import { player } from "https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.module.js";
Enter fullscreen mode Exit fullscreen mode

使用方法

初始化 FPlyr

// 2.2.4 版本以上
// 統一使用: FPlyr

// 2.2.3 版本以下
// IIFE: PDPlayer
// ESM: player

const dom = new FPlyr({
    // 選填:指定元件替換為播放器(元件的 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();
Enter fullscreen mode Exit fullscreen mode

授權條款

本專案採用類 MIT 授權,但僅提供混淆後的程式碼:

  • 與 MIT 相同:可自由使用、修改、再散布,包含商業用途
  • 主要差異:預設僅提供混淆版程式碼,原始碼需另外購買
  • 授權內容:必須保留原始版權聲明 (與 MIT 相同)

詳細條款與條件請參閱軟體使用協議

開發者

邱敬幃


©️ 2023 邱敬幃 Pardn Chiu

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more