PDPlayerKit (JavaScript Library)

PDPlayerKit 是一個輕量級的 JavaScript 播放器 JavaScript 庫，提供嵌入式的 HTML5 影片播放器和 YouTube 播放器，具備高度自定義的控制面板和視覺效果。 PDPlayerKit is a lightweight JavaScript library that provides embedded HTML5 video players and YouTube players, featuring highly customizable control panels and visual effects.

特點 / Feature

• 支援 HTML5 視頻和 YouTube 視頻播放， Supports HTML5 video and YouTube video playback.

• 自定義控制面板，包括播放、暫停、音量控制、播放速率調整等功能。 Customizable control panel, including play, pause, volume control, playback speed adjustment, and more.

• 支援行動裝置 playsinline 的狀態下支援全螢幕播放。 Supports fullscreen playback on mobile devices when playsinline is enabled.

• 使用純 JavaScript / CSS 開發。 Built using pure JavaScript and CSS.

• 使用 PDExtension-js 進行渲染。 Rendered using PDExtension-js.

• 使用 Font Awesome 6 圖標。 Use Font Awesome 6 icons.

• 使用 iframe-api 進行 Youtube 操作。 YouTube operations are handled via the iframe-api.

• 可在 此處 預覽。 Preview available Here.

開發者 / Creator

Pardn Chiu 邱敬幃

授權 / License

此源代碼項目採用 GPL-3.0 許可證授權。 This source code project is licensed under the GPL-3.0 license.

如何使用 / How to use

• 添加依賴 PDExtension-js

<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDExtension-js@[VERSION]/dist/PDExtension.min.js" copyright="Pardn Ltd"></script>

• 導入 player

import { player } from "https://cdn.jsdelivr.net/gh/pardnchiu/PDPlayerKit@[VERSION]/dist/PDPlayerKit.js";

const elm = new player({
    /* Youtube 影片ID 或 其他影片來源 */
    videoId: "UmR9zlez4OE"
    src: "/img/sample.mp4",
    /* 預設參數 */
    volume: 100,    //預設音量
    mute: false,    //預設靜音
    /* 控制器 */
    panel: [
        "play",     //播放鍵
        "timebar",  //進度條
        "time",     //進度時間
        "mute",     //靜音鍵
        "volume",   //音量鍵
        "rate",     //速率鍵
        "full",     //影片
    ],
    event: {
        ready: function() {
            console.log("ready");
        },
        playing: function() {
            console.log("playing");
        },
        pause: function() {
            console.log("pause");
        },
        end: function() {
            console.log("end");
        }
    }
});

[DOM].appendChild(elm.body);

翻譯皆靠 ChatGPT

©️ 2023 Pardn Chiu 邱敬幃