|
| 1 | +# Video Player (JavaScript Library) |
| 2 | + |
| 3 | +    |
| 4 | + |
| 5 | +## 特點 / Feature |
| 6 | + |
| 7 | +- 支持 Youtube 與一般影片連結使用。<br> |
| 8 | + Support for YouTube and general video links. |
| 9 | + |
| 10 | +- 提供播放、暫停、音量調整等影片操作功能。<br> |
| 11 | + Provides video controls such as play, pause, and volume adjustment. |
| 12 | + |
| 13 | +- 在 `playsinline` 的狀態也可真正適配 `fullscreen`。<br> |
| 14 | + Fully compatible with `fullscreen` mode even in `playsinline` state. |
| 15 | + |
| 16 | +- 使用純 JavaScript / CSS 開發。<br> |
| 17 | + Built using pure JavaScript and CSS. |
| 18 | + |
| 19 | +- 使用 [PDExtension-js](https://github.com/pardnchiu/PDExtension-js) 進行渲染。<br> |
| 20 | + Rendered using [PDExtension-js](https://github.com/pardnchiu/PDExtension-js). |
| 21 | + |
| 22 | +- 使用 [Font Awesome 6](https://fontawesome.com/v6/search) 圖標。<br> |
| 23 | + Use [Font Awesome 6](https://fontawesome.com/v6/search) icons. |
| 24 | + |
| 25 | +- 使用 [iframe-api](https://www.youtube.com/iframe_api) 進行 Youtube 操作。<br> |
| 26 | + YouTube operations are handled via the [iframe-api](https://www.youtube.com/iframe_api). |
| 27 | + |
| 28 | +- 可在 [此處](https://pardnchiu.github.io/PDPlayerKit) 預覽。<br> |
| 29 | + Preview available [Here](https://pardnchiu.github.io/PDPlayerKit). |
| 30 | + |
| 31 | +## 開發者 / Creator |
| 32 | + |
| 33 | +<a href="https://pardn.io"> |
| 34 | +<img src=https://pardn.io/image/head-s.jpg align=left width=100 height=100> |
| 35 | +</a> |
| 36 | + |
| 37 | +### Pardn Chiu 邱敬幃 |
| 38 | + |
| 39 | +[](mailto:mail@pardn.ltd) [](https://linkedin.com/in/pardnchiu) |
| 40 | + |
| 41 | +## 授權 / License |
| 42 | + |
| 43 | +此源代碼項目採用 [GPL-3.0](https://github.com/pardnchiu/markdown-editor/blob/main/LICENSE) 許可證授權。<br> |
| 44 | +This source code project is licensed under the [GPL-3.0](https://github.com/pardnchiu/markdown-editor/blob/main/LICENSE) license. |
| 45 | + |
| 46 | +## 如何使用 / How to use |
| 47 | + |
| 48 | +- 添加依賴 `PDExtension-js` |
| 49 | +```Html |
| 50 | +<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDExtension-js@[VERSION]/dist/PDExtension.min.js" copyright="Pardn Ltd"></script> |
| 51 | +``` |
| 52 | + |
| 53 | +- 導入 `player` |
| 54 | +```Javascript |
| 55 | +import { player } from "https://cdn.jsdelivr.net/gh/pardnchiu/PDPlayerKit@[VERSION]/dist/PDPlayerKit.js"; |
| 56 | + |
| 57 | +const elm = new player({ |
| 58 | + /* Youtube 影片ID 或 其他影片來源 */ |
| 59 | + videoId: "UmR9zlez4OE" |
| 60 | + src: "/img/sample.mp4", |
| 61 | + /* 預設參數 */ |
| 62 | + volume: 100, //預設音量 |
| 63 | + mute: false, //預設靜音 |
| 64 | + /* 控制器 */ |
| 65 | + panel: [ |
| 66 | + "play", //播放鍵 |
| 67 | + "timebar", //進度條 |
| 68 | + "time", //進度時間 |
| 69 | + "mute", //靜音鍵 |
| 70 | + "volume", //音量鍵 |
| 71 | + "rate", //速率鍵 |
| 72 | + "full", //影片 |
| 73 | + ], |
| 74 | + event: { |
| 75 | + ready: function() { |
| 76 | + console.log("ready"); |
| 77 | + }, |
| 78 | + playing: function() { |
| 79 | + console.log("playing"); |
| 80 | + }, |
| 81 | + pause: function() { |
| 82 | + console.log("pause"); |
| 83 | + }, |
| 84 | + end: function() { |
| 85 | + console.log("end"); |
| 86 | + } |
| 87 | + } |
| 88 | +}); |
| 89 | + |
| 90 | +[DOM].appendChild(elm.body); |
| 91 | +``` |
| 92 | +*** |
| 93 | + |
| 94 | +*翻譯皆靠 ChatGPT* |
| 95 | + |
| 96 | +*** |
| 97 | + |
| 98 | +©️ 2023 [Pardn Chiu 邱敬幃](https://www.linkedin.com/in/pardnchiu) |
0 commit comments