Skip to content

Commit 36497dc

Browse files
pardnchiupardnchiu
committed
介紹頁添加 影片 / 音訊來源，以及複製範例按鈕。
1 parent ab04d67 commit 36497dc

File tree

4 files changed

+240
-38
lines changed

4 files changed

+240
-38
lines changed

‎index.html

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,33 @@
22
<html lang="zh-Hant-TW">
33

44
<head>
5+
<!-- 基本設定 -->
56
<meta charset="UTF-8">
67
<meta http-equiv="X-UA-Compatible" content="IE=edge">
78
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
89
<meta name="theme-color" content="#ffffff">
910
<meta name="robots" content="index, follow">
11+
<meta name="author" content="邱敬幃 Pardn Chiu">
1012

13+
<!-- 網站資訊 -->
1114
<title>PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io</title>
12-
<meta name="title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
1315
<meta name="description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
14-
<meta name="author" content="邱敬幃 Pardn Chiu">
1516
<link rel="author" href="https://pardnchiu.github.io">
1617
<link rel="canonical" href="https://pardnchiu.github.io/PDPlayerKit/">
1718

18-
<!-- Open Graph / Facebook -->
19+
<!-- Open Graph / Social Media -->
1920
<meta property="og:title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
20-
<meta property="og:description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
21+
<meta property="og:description" content="A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities.">
2122
<meta property="og:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDPlayerKit">
2223
<meta property="og:url" content="https://pardnchiu.github.io/PDPlayerKit/">
2324
<meta property="og:site_name" content="邱敬幃 Pardn Chiu 的 Github Page">
2425
<meta property="og:type" content="website">
25-
26-
<!-- Twitter -->
2726
<meta name="twitter:card" content="summary_large_image">
2827
<meta property="twitter:title" content="PDPlayerKit | 邱敬幃 Pardn Chiu | GitHub.io">
29-
<meta property="twitter:description" content="(JavaScript Library) A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities. Developed by 邱敬幃 Pardn Chiu.">
28+
<meta property="twitter:description" content="A pure JavaScript-based PDPlayerKit, supporting YouTube and general video links, with play, pause, volume adjustment, and fullscreen capabilities.">
3029
<meta property="twitter:image" content="https://opengraph.githubassets.com/1/pardnchiu/PDPlayerKit">
3130
<meta property="twitter:url" content="https://pardnchiu.github.io/PDPlayerKit/">
3231

33-
<!-- Google Verification -->
34-
<meta name="google-site-verification" content="YQQ2f6AchR8dcb55Az2BYd_mw4TrP0J1RApD-v2v65Y">
35-
3632
<!-- Google Analytics -->
3733
<script async src="https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX"></script>
3834
<script>
@@ -44,26 +40,24 @@
4440

4541
<!-- Preload and Preconnect -->
4642
<link rel="preconnect" href="https://cdn.jsdelivr.net">
43+
<link rel="preconnect" href="https://fonts.googleapis.com">
44+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4745

46+
<!-- 外部資源 -->
4847
<link rel="preload" href="https://cdn.jsdelivr.net/npm/pdquickui@0.5.4/dist/PDQuickUI.js" as="script" crossorigin="anonymous">
4948
<script src="https://cdn.jsdelivr.net/npm/pdquickui@0.5.4/dist/PDQuickUI.js"></script>
50-
5149
<link rel="preload" href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/loader/run_prettify.min.js" as="script" crossorigin="anonymous">
5250
<script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/loader/run_prettify.min.js"></script>
53-
5451
<link rel="preload" href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/styles/desert.min.css" as="style" crossorigin="anonymous">
5552
<link href="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/styles/desert.min.css" rel="stylesheet">
5653

57-
58-
<link rel="preconnect" href="https://fonts.googleapis.com">
59-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
60-
54+
<!-- 字體 -->
6155
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" as="style" crossorigin="anonymous">
6256
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
63-
<!-- Local Resources -->
57+
58+
<!-- 本地資源 -->
6459
<link rel="stylesheet" href="./dist/PDPlayerKit.css">
6560
<link rel="stylesheet" href="./static/css/index.css">
66-
6761
<script src="./dist/PDPlayerKit.js"></script>
6862
</head>
6963

@@ -75,13 +69,16 @@ <h1><span class="material-symbols-outlined">subscriptions</span>PDPlayerKit</h1>
7569
<h2>模組化影片/音訊播放器</h2>
7670
<p>簡單易用，適合個人網站嵌入。</p>
7771
</section>
78-
<section id="header-video"></section>
72+
<section>
73+
<section id="header-video"></section>
74+
<p>Source: <a href="https://pixabay.com/videos/temple-pond-garden-kinkakuji-temple-214940/" target="_blank">pixabay (Kanenori)</a></p>
75+
</section>
7976
</header>
8077

8178
<section>
8279
<h2>輕鬆嵌入到個人網站</h2>
8380
<p>只需從 cdn.jsdelivr.net 引入核心源碼</p>
84-
<code>https://cdn.jsdelivr.net/npm/pdplayerkit@1.0.0/dist/PDPlayerKit.min.js</code>
81+
<code>https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.js</code>
8582
<p>使用 JavaScript 代碼添加播放器</p>
8683
<pre class="prettyprint">
8784
<code class="language-javascript">
@@ -161,16 +158,25 @@ <h2>多種不同風格的面板做選擇</h2>
161158
<label draggable="true" @dragstart="dragStart" @dragend="dragEnd" @dragover="dragOver" @dragleave="dragLeave" @drop="drop" @change="change">
162159
<input type="checkbox" name="buttonItem" value="full" checked>full
163160
</label>
161+
<hr>
162+
<button type="button" @click="copyDemoStyle">
163+
<span class="material-symbols-outlined">
164+
content_copy
165+
</span>
166+
複製代碼
167+
</button>
164168
</form>
165169
</section>
166170
<section>
167171
<section id="sample-video"></section>
172+
<p id="sample-video-hint"></p>
168173
</section>
169174
</section>
170175

171176
<section>
172177
<section>
173178
<section id="sample-youtube"></section>
179+
<p id="sample-youtube-hint"></p>
174180
</section>
175181
<section>
176182
<h2>支持 Vimeo / YouTube</h2>
@@ -194,30 +200,31 @@ <h2>音源播放支援</h2>
194200
</section>
195201
<section>
196202
<section id="sample-audio"></section>
203+
<p id="sample-audio-hint"></p>
197204
</section>
198205
</section>
199206

200207
<footer>
201-
<p>Developed by <strong>邱敬幃</strong></p>
208+
<p>Created by <a href="https://github.com/pardnchiu" target="_blank">邱敬幃</a></p>
202209
<p><a href="https://github.com/pardnchiu/PDPlayerKit" target="_blank">PDPlayerKit on GitHub</a></p>
203210
<p>&copy; 2024</p>
204211
</footer>
205212

206213
<script type="module">
207214
// import { player as PDPlayer } from "./dist/PDPlayerKit.module.js";
208215

209-
let dragTarget;
216+
let dragTarget, demoVideoCode, copyTimer;
210217
const demoStyle = [
211-
["", "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4"],
212-
["minimal", "https://cdn.pixabay.com/video/2024/06/06/215484_tiny.mp4"],
213-
["classic", "https://cdn.pixabay.com/video/2023/10/22/186115-877653483_tiny.mp4"],
214-
["retro", "https://cdn.pixabay.com/video/2019/01/06/20495-310204614_tiny.mp4"],
215-
["simple", "https://cdn.pixabay.com/video/2020/09/16/50109-459915579_tiny.mp4"]
218+
["", "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4", "https://pixabay.com/videos/gull-bird-snow-plumage-sitting-191159/", "NickyPe"],
219+
["minimal", "https://cdn.pixabay.com/video/2024/06/06/215484_tiny.mp4", "https://pixabay.com/videos/sea-waves-reflection-undulations-215484/", "xBriantcx"],
220+
["classic", "https://cdn.pixabay.com/video/2023/10/22/186115-877653483_tiny.mp4", "https://pixabay.com/videos/beach-sea-ocean-sand-drone-aerial-186115/", "Anewlifetraveling"],
221+
["retro", "https://cdn.pixabay.com/video/2019/01/06/20495-310204614_tiny.mp4", "https://pixabay.com/videos/pixel-bit-coin-game-video-vector-20495/", "Gam-Ol"],
222+
["simple", "https://cdn.pixabay.com/video/2020/09/16/50109-459915579_tiny.mp4", "https://pixabay.com/videos/tennis-match-sport-ball-game-50109/", "xat-ch"]
216223
];
217224
const demoAudio = [
218-
["retro", "https://cdn.pixabay.com/download/audio/2024/09/16/audio_a10608d6cd.mp3?filename=creative-technology-showreel-241274.mp3"],
219-
["classic", "https://cdn.pixabay.com/download/audio/2024/10/21/audio_78251ef8e3.mp3?filename=beautiful-loop-253269.mp3"],
220-
["simple", "https://cdn.pixabay.com/download/audio/2024/04/12/audio_3118cb3f2a.mp3?filename=groovy-ambient-funk-201745.mp3"],
225+
["retro", "https://cdn.pixabay.com/download/audio/2024/09/16/audio_a10608d6cd.mp3?filename=creative-technology-showreel-241274.mp3", "https://pixabay.com/music/beats-creative-technology-showreel-241274/", "Pumpupthemind"],
226+
["classic", "https://cdn.pixabay.com/download/audio/2024/10/21/audio_78251ef8e3.mp3?filename=beautiful-loop-253269.mp3", "https://pixabay.com/music/beautiful-loop-253269/", "DaveJf"],
227+
["simple", "https://cdn.pixabay.com/download/audio/2024/04/12/audio_3118cb3f2a.mp3?filename=groovy-ambient-funk-201745.mp3", "https://pixabay.com/music/groovy-ambient-funk-201745/", "moodmode"],
221228
];
222229

223230
document.addEventListener("DOMContentLoaded", _ => {
@@ -226,6 +233,19 @@ <h2>音源播放支援</h2>
226233
return [...document.querySelectorAll("input[name='buttonItem']:checked")].map(e => e.value);
227234
};
228235

236+
function demoStyleCode(data) {
237+
return `\<script src="https://cdn.jsdelivr.net/npm/pdplayerkit@latest/dist/PDPlayerKit.js"\>\</script\>
238+
\<script\>
239+
const dom = new PDPlayer({
240+
type: "${data[0]}",
241+
video: "${data[1]}",
242+
volume: 100,
243+
mute: false,
244+
panel: ${JSON.stringify(getButtonItems())}
245+
});
246+
\</script\>`;
247+
}
248+
229249
const page = new QUI({
230250
id: "page",
231251
event: {
@@ -239,6 +259,7 @@ <h2>音源播放支援</h2>
239259
mute: false,
240260
panel: getButtonItems()
241261
});
262+
242263
document.getElementById("sample-video").innerHTML = ""
243264
document.getElementById("sample-video").appendChild(dom.body);
244265
},
@@ -301,9 +322,29 @@ <h2>音源播放支援</h2>
301322
});
302323
document.getElementById("sample-video").innerHTML = ""
303324
document.getElementById("sample-video").appendChild(dom.body);
325+
document.getElementById("sample-video-hint").innerHTML = `Source: <a href="${data[2]}" target="_blank">pixabay (${data[3]})</a>`;
304326

305327
_this.parentElement.dataset.selected = index;
306328
},
329+
copyDemoStyle: e => {
330+
const _this = e.target;
331+
const index = +document.getElementById("demo-style").dataset.selected;
332+
const data = demoStyle[index];
333+
334+
clearTimeout(copyTimer);
335+
336+
try {
337+
navigator.clipboard.writeText(demoStyleCode(data));
338+
339+
_this.innerHTML = _this.innerHTML.replace(/複製代碼/, "已複製");
340+
copyTimer = setTimeout(() => {
341+
_this.innerHTML = _this.innerHTML.replace(/已複製/, "複製代碼");
342+
}, 500);
343+
}
344+
catch (err) {
345+
alert(err);
346+
};
347+
},
307348
showDemoAudio: e => {
308349
const _this = e.target;
309350
const index = +_this.dataset.index;
@@ -317,6 +358,7 @@ <h2>音源播放支援</h2>
317358
});
318359
document.getElementById("sample-audio").innerHTML = ""
319360
document.getElementById("sample-audio").appendChild(dom.body);
361+
document.getElementById("sample-audio-hint").innerHTML = `Source: <a href="${data[2]}" target="_blank">pixabay (${data[3]})</a>`;
320362

321363
_this.parentElement.dataset.selected = index;
322364
},
@@ -330,6 +372,7 @@ <h2>音源播放支援</h2>
330372
});
331373
document.getElementById("sample-youtube").innerHTML = "";
332374
document.getElementById("sample-youtube").appendChild(dom.body);
375+
document.getElementById("sample-youtube-hint").innerHTML = `Source: <a href="https://www.youtube.com/watch?v=O5O3yK8DJCc" target="_blank">youtube (Sony)</a>`;
333376

334377
if (e != null) {
335378
e.target.parentElement.dataset.selected = 1;
@@ -345,6 +388,7 @@ <h2>音源播放支援</h2>
345388
});
346389
document.getElementById("sample-youtube").innerHTML = "";
347390
document.getElementById("sample-youtube").appendChild(dom.body);
391+
document.getElementById("sample-youtube-hint").innerHTML = `Source: <a href="https://vimeo.com/458695734" target="_blank">vimeo (UAS Flight Ops)</a>`;
348392

349393
if (e != null) {
350394
e.target.parentElement.dataset.selected = 0;
@@ -356,6 +400,7 @@ <h2>音源播放支援</h2>
356400
const dom = new PDPlayer({
357401
type: "",
358402
video: "https://cdn.pixabay.com/video/2024/06/02/214940_tiny.mp4",
403+
//
359404
volume: 100,
360405
mute: false,
361406
panel: getButtonItems()

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pdplayerkit",
3-
"version": "2.0.0",
3+
"version": "2.0.1",
44
"description": "PDPlayerKit is a lightweight JavaScript library that provides embedded HTML5 video players and YouTube players, featuring highly customizable control panels and visual effects.",
55
"main": "dist/PDPlayerKit.js",
66
"scripts": {

0 commit comments

Comments
 (0)