PDPlayerKit 是一個輕量級的 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.
-
支援 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 whenplaysinline
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.
此源代碼項目採用 GPL-3.0 許可證授權。
This source code project is licensed under the GPL-3.0 license.
npm i pdplayerkit
- 添加依賴
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({
videoId: "" // YouTube 視頻 ID
src: "/static/image/sample.mp4", // 影片連結(適用於 HTML5 影片)
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 邱敬幃