multi_embed_player 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/.github/workflows/build-and-deploy.yml +44 -0
  2. package/.gitmodules +3 -0
  3. package/CLAUDE.md +92 -0
  4. package/README.md +0 -24
  5. package/add_types.sh +61 -0
  6. package/browserExtention/chrome/background.js +55 -0
  7. package/browserExtention/chrome/extention.json +1 -0
  8. package/browserExtention/chrome/liteplayer.js +26439 -0
  9. package/browserExtention/chrome/manifest.json +31 -0
  10. package/browserExtention/chrome/player-selector.js +1854 -0
  11. package/browserExtention/firefox/background.js +27 -0
  12. package/browserExtention/firefox/extention.json +1 -0
  13. package/browserExtention/firefox/liteplayer.js +26439 -0
  14. package/browserExtention/firefox/manifest.json +19 -0
  15. package/browserExtention/firefox/player-selector.js +1854 -0
  16. package/documents/.hugo_build.lock +0 -0
  17. package/documents/archetypes/default.md +5 -0
  18. package/documents/assets/jsconfig.json +11 -0
  19. package/documents/content/docs/install.md +103 -0
  20. package/documents/content/docs/quickstart.md +51 -0
  21. package/documents/content/docs/reference/HTML.md +31 -0
  22. package/documents/content/docs/reference/_index.md +10 -0
  23. package/documents/content/docs/reference/error_code.md +23 -0
  24. package/documents/content/docs/reference/iframe_api.md +737 -0
  25. package/documents/content/docs/reference/iframe_class.md +230 -0
  26. package/documents/content/docs/reference/multi_embed_player_class.md +113 -0
  27. package/documents/content/docs/reference/reserved_words.md +71 -0
  28. package/documents/content/docs/usage/GDPR_mode.md +77 -0
  29. package/documents/content/docs/usage/_index.md +10 -0
  30. package/documents/content/docs/usage/custom_playlist.md +239 -0
  31. package/documents/content/docs/usage/embed_api.md +163 -0
  32. package/documents/content/docs/usage/embed_various_service.md +81 -0
  33. package/documents/content/docs/usage/thumbnail_click.md +57 -0
  34. package/documents/go.mod +8 -0
  35. package/documents/go.sum +14 -0
  36. package/documents/hugo.toml +18 -0
  37. package/documents/layouts/partials/docs/sidebar.html +117 -0
  38. package/documents/layouts/partials/landing/features.html +47 -0
  39. package/documents/layouts/robots.txt +4 -0
  40. package/documents/static/_headers +7 -0
  41. package/documents/static/localStorageCheck.html +27 -0
  42. package/documents/static/no_extention.json +1 -0
  43. package/example.html +27 -0
  44. package/extention.json +1 -0
  45. package/icon/video_not_found.odg +0 -0
  46. package/icon/video_not_found.svgz +0 -0
  47. package/iframe_api/bilibili.ts +1095 -0
  48. package/iframe_api/niconico.ts +429 -0
  49. package/iframe_api/soundcloud.ts +450 -0
  50. package/iframe_api/youtube.ts +311 -0
  51. package/multi_embed_player.ts +989 -0
  52. package/package.json +10 -41
  53. package/player_api_gate/bilibili-api-gate/cgi/cpp/bilibili-api-gate-cgi.cpp +281 -0
  54. package/player_api_gate/bilibili-api-gate/cgi/go/src.go +46 -0
  55. package/player_api_gate/bilibili-api-gate/cloudflare_workers/package-lock.json +1356 -0
  56. package/player_api_gate/bilibili-api-gate/cloudflare_workers/package.json +12 -0
  57. package/player_api_gate/bilibili-api-gate/cloudflare_workers/src/index.js +50 -0
  58. package/player_api_gate/bilibili-api-gate/cloudflare_workers/wrangler.toml +3 -0
  59. package/player_api_gate/iframe-api-ts/.editorconfig +12 -0
  60. package/player_api_gate/iframe-api-ts/.prettierrc +6 -0
  61. package/player_api_gate/iframe-api-ts/package-lock.json +3054 -0
  62. package/player_api_gate/iframe-api-ts/package.json +18 -0
  63. package/player_api_gate/iframe-api-ts/src/bilibili.ts +49 -0
  64. package/player_api_gate/iframe-api-ts/src/index.ts +35 -0
  65. package/player_api_gate/iframe-api-ts/src/niconico.ts +95 -0
  66. package/player_api_gate/iframe-api-ts/src/soundcloud.ts +38 -0
  67. package/player_api_gate/iframe-api-ts/src/types.ts +115 -0
  68. package/player_api_gate/iframe-api-ts/src/url-proxy.ts +29 -0
  69. package/player_api_gate/iframe-api-ts/src/utils.ts +82 -0
  70. package/player_api_gate/iframe-api-ts/src/youtube.ts +41 -0
  71. package/player_api_gate/iframe-api-ts/test/bilibili.spec.ts +47 -0
  72. package/player_api_gate/iframe-api-ts/test/env.d.ts +3 -0
  73. package/player_api_gate/iframe-api-ts/test/index.spec.ts +59 -0
  74. package/player_api_gate/iframe-api-ts/test/niconico.spec.ts +55 -0
  75. package/player_api_gate/iframe-api-ts/test/soundcloud.spec.ts +55 -0
  76. package/player_api_gate/iframe-api-ts/test/tsconfig.json +8 -0
  77. package/player_api_gate/iframe-api-ts/test/url-proxy.spec.ts +46 -0
  78. package/player_api_gate/iframe-api-ts/test/youtube.spec.ts +45 -0
  79. package/player_api_gate/iframe-api-ts/tsconfig.json +45 -0
  80. package/player_api_gate/iframe-api-ts/vitest.config.mts +11 -0
  81. package/player_api_gate/iframe-api-ts/worker-configuration.d.ts +5768 -0
  82. package/player_api_gate/iframe-api-ts/wrangler.jsonc +47 -0
  83. package/player_api_gate/iframe_api/.editorconfig +13 -0
  84. package/player_api_gate/iframe_api/.prettierrc +6 -0
  85. package/player_api_gate/iframe_api/package-lock.json +1307 -0
  86. package/player_api_gate/iframe_api/package.json +12 -0
  87. package/player_api_gate/iframe_api/src/bilibili_api.js +60 -0
  88. package/player_api_gate/iframe_api/src/index.js +47 -0
  89. package/player_api_gate/iframe_api/src/niconico_api.js +112 -0
  90. package/player_api_gate/iframe_api/src/soundcloud_api.js +57 -0
  91. package/player_api_gate/iframe_api/src/url_proxy.js +28 -0
  92. package/player_api_gate/iframe_api/src/youtube_api.js +44 -0
  93. package/player_api_gate/iframe_api/wrangler.toml +51 -0
  94. package/player_api_gate/niconico-imager/cgi/go/src.go +74 -0
  95. package/player_api_gate/niconico-imager/cloudflare_workers/package-lock.json +2175 -0
  96. package/player_api_gate/niconico-imager/cloudflare_workers/package.json +12 -0
  97. package/player_api_gate/niconico-imager/cloudflare_workers/src/index.js +78 -0
  98. package/player_api_gate/niconico-imager/cloudflare_workers/wrangler.toml +3 -0
  99. package/test_script.html +172 -0
  100. package/tsconfig.json +36 -0
  101. package/dist/iframe_api/bilibili.d.ts +0 -91
  102. package/dist/iframe_api/bilibili.d.ts.map +0 -1
  103. package/dist/iframe_api/bilibili.js +0 -451
  104. package/dist/iframe_api/bilibili.js.map +0 -1
  105. package/dist/iframe_api/index.d.ts +0 -6
  106. package/dist/iframe_api/index.d.ts.map +0 -1
  107. package/dist/iframe_api/index.js +0 -8
  108. package/dist/iframe_api/index.js.map +0 -1
  109. package/dist/iframe_api/niconico.d.ts +0 -42
  110. package/dist/iframe_api/niconico.d.ts.map +0 -1
  111. package/dist/iframe_api/niconico.js +0 -181
  112. package/dist/iframe_api/niconico.js.map +0 -1
  113. package/dist/iframe_api/soundcloud.d.ts +0 -80
  114. package/dist/iframe_api/soundcloud.d.ts.map +0 -1
  115. package/dist/iframe_api/soundcloud.js +0 -188
  116. package/dist/iframe_api/soundcloud.js.map +0 -1
  117. package/dist/iframe_api/youtube.d.ts +0 -133
  118. package/dist/iframe_api/youtube.d.ts.map +0 -1
  119. package/dist/iframe_api/youtube.js +0 -278
  120. package/dist/iframe_api/youtube.js.map +0 -1
  121. package/dist/multi_embed_player.d.ts +0 -48
  122. package/dist/multi_embed_player.d.ts.map +0 -1
  123. package/dist/multi_embed_player.js +0 -318
  124. package/dist/multi_embed_player.js.map +0 -1
  125. package/dist/types.d.ts +0 -126
  126. package/dist/types.d.ts.map +0 -1
  127. package/dist/types.js +0 -22
  128. package/dist/types.js.map +0 -1
@@ -0,0 +1,239 @@
1
+ ---
2
+ weight: 1400
3
+ title: "Custom Playlists"
4
+ description: "Learn how to create custom playlists with multi-embed-player and play videos sequentially."
5
+ icon: "article"
6
+ date: "2025-05-17T10:00:00+09:00"
7
+ lastmod: "2025-05-17T10:00:00+09:00"
8
+ draft: false
9
+ toc: true
10
+ ---
11
+
12
+ <!--load api-->
13
+ <script src="https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/multi_embed_player.js"></script>
14
+
15
+ <style>
16
+ multi-embed-player {
17
+ width: 480px;
18
+ height: 270px;
19
+ max-width: 100%;
20
+ }
21
+ multi-embed-player[type="thumbnail-click"] {
22
+ min-width: 240px;
23
+ min-height: 135px;
24
+ margin-right: 10px; /* Space between thumbnails */
25
+ }
26
+ .playlist-container {
27
+ display: flex;
28
+ overflow-x: auto; /* Horizontal scroll for many thumbnails */
29
+ padding-bottom: 10px;
30
+ }
31
+ </style>
32
+
33
+ ## Custom Playlist Feature
34
+
35
+ `multi-embed-player` allows you to create custom playlists to line up multiple videos for sequential playback.
36
+ This feature enables users to enjoy a series of video content without interruption.
37
+
38
+ ### Basic Usage (HTML Attributes)
39
+
40
+ You can easily set up a playlist using HTML attributes.
41
+
42
+ 1. **Define the Player Element:**
43
+ Place a `<multi-embed-player>` element with the `type="player"` attribute. This will be the main player that plays the videos. Assign it a unique `id`.
44
+
45
+ 2. **Define Playlist Item Elements:**
46
+ Place `<multi-embed-player>` elements with the `type="thumbnail-click"` attribute. When clicked, these elements will add a video to the player specified by their `for` attribute.
47
+ * `service`: Specify the video service (e.g., `youtube`, `niconico`).
48
+ * `videoid`: The video ID from the respective service.
49
+ * `for`: The `id` of the target player element.
50
+ * `start` (optional): The start time for the video (in seconds).
51
+ * `end` (optional): The end time for the video (in seconds).
52
+
53
+ #### Example:
54
+
55
+ ```html
56
+ <multi-embed-player id="myCustomPlayer" type="player"></multi-embed-player>
57
+
58
+ <p>↓ Click or right-click the thumbnails below to add to the playlist</p>
59
+ <div class="playlist-container">
60
+ <multi-embed-player
61
+ type="thumbnail-click"
62
+ service="youtube"
63
+ videoid="YOUTUBE_VIDEO_ID_1" <!-- Replace with an actual YouTube video ID -->
64
+ for="myCustomPlayer"
65
+ start="10"
66
+ end="50">
67
+ </multi-embed-player>
68
+
69
+ <multi-embed-player
70
+ type="thumbnail-click"
71
+ service="niconico"
72
+ videoid="sm9" <!-- Replace with an actual Niconico video ID -->
73
+ for="myCustomPlayer">
74
+ </multi-embed-player>
75
+
76
+ <multi-embed-player
77
+ type="thumbnail-click"
78
+ service="youtube"
79
+ videoid="YOUTUBE_VIDEO_ID_2" <!-- Replace with an actual YouTube video ID -->
80
+ for="myCustomPlayer"
81
+ start="30">
82
+ </multi-embed-player>
83
+ </div>
84
+ ```
85
+
86
+ **Behavior:**
87
+ * Left-clicking a thumbnail (`type="thumbnail-click"` element) will immediately play the video in the player.
88
+ * Right-clicking (context menu) a thumbnail will add the video to the end of the player's playlist.
89
+ * The player will automatically play the next video in the playlist when the current video finishes.
90
+
91
+ #### Live Demo:
92
+
93
+ <multi-embed-player id="myCustomPlayer_Demo_EN" type="player"></multi-embed-player>
94
+
95
+ <p>↓ Click or right-click the thumbnails below to add to the playlist</p>
96
+ <div class="playlist-container">
97
+ <multi-embed-player
98
+ type="thumbnail-click"
99
+ service="youtube"
100
+ videoid="0ngyl5gbEQQ"
101
+ for="myCustomPlayer_Demo_EN"
102
+ start="10"
103
+ end="50">
104
+ </multi-embed-player>
105
+ <multi-embed-player
106
+ type="thumbnail-click"
107
+ service="niconico"
108
+ videoid="sm15885393"
109
+ for="myCustomPlayer_Demo_EN">
110
+ </multi-embed-player>
111
+ <multi-embed-player
112
+ type="thumbnail-click"
113
+ service="youtube"
114
+ videoid="H4C23eF_r2Q"
115
+ for="myCustomPlayer_Demo_EN"
116
+ start="30">
117
+ </multi-embed-player>
118
+ </div>
119
+
120
+ ### Playlist Manipulation with JavaScript
121
+
122
+ You can also dynamically add video items to the playlist using JavaScript.
123
+
124
+ #### Steps:
125
+
126
+ 1. **Get the Player Element:**
127
+ Retrieve the player element (the one with `type="player"`) using `document.getElementById()` or a similar method.
128
+
129
+ 2. **Create an `mep_playitem`:**
130
+ Create an `mep_playitem` object containing the information for the video you want to add.
131
+ The `mep_playitem` class is defined in the global scope by `multi_embed_player.js`.
132
+ ```javascript
133
+ const newItem = new mep_playitem('serviceName', 'videoID');
134
+ newItem.startSeconds = 30; // Optional: Start time
135
+ newItem.endSeconds = 120; // Optional: End time
136
+ // newItem.subService = 'alternativeServiceName'; // Optional
137
+ // newItem.subVideoid = 'alternativeVideoID'; // Optional
138
+ ```
139
+
140
+ 3. **Add to Playlist:**
141
+ `push` the data (converted by `newItem.toData()`) into the `playlist` array of the retrieved player element.
142
+
143
+ 4. **Dispatch Event (Playback Trigger):**
144
+ Dispatch an `addPlaylist` event on the player element. This notifies the player of the change and, depending on its current state, may start playing the next video.
145
+
146
+ #### Example:
147
+
148
+ ```html
149
+ <multi-embed-player id="jsPlayer" type="player"></multi-embed-player>
150
+ <button onclick="addYouTubeVideoJS()">Add YouTube Video (JS)</button>
151
+ <button onclick="addNiconicoVideoJS()">Add Niconico Video (JS)</button>
152
+
153
+ <script>
154
+ function addYouTubeVideoJS() {
155
+ const playerElement = document.getElementById('jsPlayer');
156
+ if (playerElement) {
157
+ const newItem = new mep_playitem('youtube', 'dQw4w9WgXcQ'); // A well-known video ID
158
+ newItem.startSeconds = 5;
159
+
160
+ if (playerElement.playlist) {
161
+ playerElement.playlist.push(newItem.toData());
162
+ playerElement.dispatchEvent(new Event('addPlaylist'));
163
+ console.log('YouTube video added to playlist.');
164
+ } else {
165
+ console.error('Playlist property not found.');
166
+ }
167
+ } else {
168
+ console.error('Player element not found.');
169
+ }
170
+ }
171
+
172
+ function addNiconicoVideoJS() {
173
+ const playerElement = document.getElementById('jsPlayer');
174
+ if (playerElement) {
175
+ const newItem = new mep_playitem('niconico', 'sm9'); // A classic video ID
176
+ // newItem.startSeconds = 10;
177
+
178
+ if (playerElement.playlist) {
179
+ playerElement.playlist.push(newItem.toData());
180
+ playerElement.dispatchEvent(new Event('addPlaylist'));
181
+ console.log('Niconico video added to playlist.');
182
+ } else {
183
+ console.error('Playlist property not found.');
184
+ }
185
+ } else {
186
+ console.error('Player element not found.');
187
+ }
188
+ }
189
+ </script>
190
+ ```
191
+
192
+ #### Live Demo (JavaScript):
193
+
194
+ <multi-embed-player id="jsPlayer_Demo_EN" type="player"></multi-embed-player>
195
+ <button onclick="addYouTubeVideoJS_Demo_EN()">Add YouTube Video (JS)</button>
196
+ <button onclick="addNiconicoVideoJS_Demo_EN()">Add Niconico Video (JS)</button>
197
+
198
+ <script>
199
+ function addYouTubeVideoJS_Demo_EN() {
200
+ const playerElement = document.getElementById('jsPlayer_Demo_EN');
201
+ if (playerElement) {
202
+ const newItem = new mep_playitem('youtube', 'dQw4w9WgXcQ');
203
+ newItem.startSeconds = 5;
204
+
205
+ if (playerElement.playlist) {
206
+ playerElement.playlist.push(newItem.toData());
207
+ playerElement.dispatchEvent(new Event('addPlaylist'));
208
+ alert('YouTube video added to playlist.');
209
+ } else {
210
+ alert('Playlist property not found.');
211
+ }
212
+ } else {
213
+ alert('Player element not found.');
214
+ }
215
+ }
216
+
217
+ function addNiconicoVideoJS_Demo_EN() {
218
+ const playerElement = document.getElementById('jsPlayer_Demo_EN');
219
+ if (playerElement) {
220
+ const newItem = new mep_playitem('niconico', 'sm9');
221
+
222
+ if (playerElement.playlist) {
223
+ playerElement.playlist.push(newItem.toData());
224
+ playerElement.dispatchEvent(new Event('addPlaylist'));
225
+ alert('Niconico video added to playlist.');
226
+ } else {
227
+ alert('Playlist property not found.');
228
+ }
229
+ } else {
230
+ alert('Player element not found.');
231
+ }
232
+ }
233
+ </script>
234
+
235
+ ### Notes
236
+ * When using `type="thumbnail-click"`, ensure a corresponding `type="player"` element exists on the page and its `id` is correctly referenced by the `for` attribute.
237
+ * When manipulating via JavaScript, ensure your script runs after `multi_embed_player.js` has loaded and the `mep_playitem` class is available.
238
+ * Specify video IDs and service names accurately. If you specify a non-existent video or an unsupported service, it will not work as expected.
239
+ * Even with the same video ID and service, if the start or end times differ, they will be treated as separate items in the playlist. Internally, for the same service and video ID, the player will try to use lightweight methods like `seekTo` to change the playback position whenever possible, but this depends on the implementation of the player for each specific service.
@@ -0,0 +1,163 @@
1
+ ---
2
+ weight: 1100
3
+ title: "Embed_api"
4
+ description: ""
5
+ icon: "article"
6
+ date: "2023-11-04T15:15:14+09:00"
7
+ lastmod: "2023-11-04T15:15:14+09:00"
8
+ draft: false
9
+ toc: true
10
+ ---
11
+
12
+ <!--load api-->
13
+ <script src="https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/multi_embed_player.js"></script>
14
+
15
+ <style>
16
+ multi-embed-player{
17
+ width: 480px;
18
+ height: 270px;
19
+ max-width: 100%;
20
+ }
21
+ </style>
22
+
23
+ ## Embed_api
24
+
25
+ multi_embed_player embed api can embed various service embed video to your website with one API.
26
+
27
+ This use for embed display element to load api.
28
+
29
+ ## Example
30
+
31
+ ```HTML
32
+ <!--define html display element-->
33
+ <multi-embed-player id="mep_player" type="player"></multi-embed-player>
34
+ <div style="display: flex;">
35
+ <button onclick="document.getElementById('mep_player').playVideo()">play</button>
36
+ <button onclick="document.getElementById('mep_player').pauseVideo()">pause</button>
37
+ <!--mute and unmute button-->
38
+ <button onclick="document.getElementById('mep_player').mute()">mute</button>
39
+ <button onclick="document.getElementById('mep_player').unMute()">unmute</button>
40
+ <!--sound volume range-->
41
+ <input type="range" min="0" max="100" value="100" oninput="document.getElementById('mep_player').setVolume(this.value)">
42
+ <!--seek to input box value max is not define seekTo button click-->
43
+ <input type="number" id="seek_to_input" value="0">
44
+ <button onclick="document.getElementById('mep_player').seekTo(document.getElementById('seek_to_input').value)">seekTo</button>
45
+ <!--under this getter function !sometimes! return promise-->
46
+ <!--print to console about currenttime-->
47
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getCurrentTime())})()">get current time</button>
48
+ <!--print to console about duration-->
49
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getDuration())})()">get duration</button>
50
+ <!--print to console about volume-->
51
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getVolume())})()">get volume</button>
52
+ <!--print to console about player state-->
53
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getPlayerState())})()">get player state</button>
54
+ <!--print mute status-->
55
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').isMuted())})()">is muted</button>
56
+ </div>
57
+ <div style="display: flex;">
58
+ <!--load youtube video-->
59
+ <input value="0ngyl5gbEQQ" type="text" placeholder="youtube video id" id="youtube_video_id">
60
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('youtube_video_id').value, service:'youtube'})">load youtube video</button>
61
+ </div>
62
+ <div style="display: flex;">
63
+ <!--load niconico video-->
64
+ <input type="text" placeholder="niconico video id" id="niconico_video_id">
65
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('niconico_video_id').value, service:'niconico'})">load niconico video</button>
66
+ </div>
67
+ <div style="display: flex;">
68
+ <!--load bilibili video-->
69
+ <input value="BV16K4y177HZ" type="text" placeholder="bilibili video id" id="bilibili_video_id">
70
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('bilibili_video_id').value, service:'bilibili'})">load bilibili video</button>
71
+ </div>
72
+ <div style="display: flex;">
73
+ <!--load soundcloud video-->
74
+ <input value="dada-qada/koisashi" type="text" placeholder="soundcloud video id" id="soundcloud_video_id">
75
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('soundcloud_video_id').value, service:'soundcloud'})">load soundcloud video</button>
76
+ </div>
77
+ ```
78
+
79
+ <multi-embed-player id="mep_player" type="player"></multi-embed-player>
80
+
81
+ <div style="display: flex;">
82
+ <button onclick="document.getElementById('mep_player').playVideo()">play</button>
83
+ <button onclick="document.getElementById('mep_player').pauseVideo()">pause</button>
84
+ <!--mute and unmute button-->
85
+ <button onclick="document.getElementById('mep_player').mute()">mute</button>
86
+ <button onclick="document.getElementById('mep_player').unMute()">unmute</button>
87
+ <!--sound volume range-->
88
+ <input type="range" min="0" max="100" value="100" oninput="document.getElementById('mep_player').setVolume(this.value)">
89
+ <!--seek to input box value max is not define seekTo button click-->
90
+ <input type="number" id="seek_to_input" value="0">
91
+ <button onclick="document.getElementById('mep_player').seekTo(document.getElementById('seek_to_input').value)">seekTo</button>
92
+ <!--under this getter function !sometimes! return promise-->
93
+ <!--print to console about currenttime-->
94
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getCurrentTime())})()">get current time</button>
95
+ <!--print to console about duration-->
96
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getDuration())})()">get duration</button>
97
+ <!--print to console about volume-->
98
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getVolume())})()">get volume</button>
99
+ <!--print to console about player state-->
100
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').getPlayerState())})()">get player state</button>
101
+ <!--print mute status-->
102
+ <button onclick="(async()=>{console.log(await document.getElementById('mep_player').isMuted())})()">is muted</button>
103
+ </div>
104
+ <div style="display: flex;">
105
+ <!--load youtube video-->
106
+ <input value="0ngyl5gbEQQ" type="text" placeholder="youtube video id" id="youtube_video_id">
107
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('youtube_video_id').value, service:'youtube'})">load youtube video</button>
108
+ </div>
109
+ <div style="display: flex;">
110
+ <!--load niconico video-->
111
+ <input type="text" placeholder="niconico video id" id="niconico_video_id">
112
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('niconico_video_id').value, service:'niconico'})">load niconico video</button>
113
+ </div>
114
+ <div style="display: flex;">
115
+ <!--load bilibili video-->
116
+ <input value="BV16K4y177HZ" type="text" placeholder="bilibili video id" id="bilibili_video_id">
117
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('bilibili_video_id').value, service:'bilibili'})">load bilibili video</button>
118
+ </div>
119
+ <div style="display: flex;">
120
+ <!--load soundcloud video-->
121
+ <input value="dada-qada/koisashi" type="text" placeholder="soundcloud video id" id="soundcloud_video_id">
122
+ <button onclick="document.getElementById('mep_player').loadVideoById({'videoId':document.getElementById('soundcloud_video_id').value, service:'soundcloud'})">load soundcloud video</button>
123
+ </div>
124
+
125
+ ## internal iframe API
126
+
127
+ ### Example
128
+
129
+ This example [embed bilibili video](https://www.bilibili.com/video/BV16K4y177HZ/) and control it.
130
+
131
+ ```HTML
132
+ <script src="https://cdn.jsdelivr.net/gh/bonjinnorenka/multi_embed_player@v2/iframe_api/bilibili.js"></script>
133
+ <div style="width: 480px;height: 270px;display: block;position: relative;"><div id="mep_internal_description"></div></div>
134
+ <button id="pause_button">pause</button>
135
+ <script type="text/javascript">
136
+ const mep_internal_description_element = document.getElementById('mep_internal_description');
137
+ const player = new mep_bilibili('mep_internal_description', {
138
+ 'videoId': 'BV16K4y177HZ',
139
+ 'width': '480',
140
+ 'height': '270',
141
+ });
142
+ const pause_button = document.getElementById('pause_button');
143
+ pause_button.onclick = () => {
144
+ player.pauseVideo();
145
+ }
146
+ </script>
147
+ ```
148
+
149
+ <script src="https://cdn.jsdelivr.net/gh/bonjinnorenka/multi_embed_player@v2/iframe_api/bilibili.js"></script>
150
+ <div style="width: 480px;height: 270px;display: block;position: relative;"><div id="mep_internal_description"></div></div>
151
+ <button id="pause_button">pause</button>
152
+ <script type="text/javascript">
153
+ const mep_internal_description_element = document.getElementById('mep_internal_description');
154
+ const player = new mep_bilibili('mep_internal_description', {
155
+ 'videoId': 'BV16K4y177HZ',
156
+ 'width': '480',
157
+ 'height': '270',
158
+ });
159
+ const pause_button = document.getElementById('pause_button');
160
+ pause_button.onclick = () => {
161
+ player.pauseVideo();
162
+ }
163
+ </script>
@@ -0,0 +1,81 @@
1
+ ---
2
+ weight: 900
3
+ title: "Embed_various_service"
4
+ description: ""
5
+ icon: "article"
6
+ date: "2023-11-04T14:33:32+09:00"
7
+ lastmod: "2023-11-04T14:33:32+09:00"
8
+ draft: false
9
+ toc: true
10
+ ---
11
+
12
+ <!--load embed api-->
13
+ <script src="https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/multi_embed_player.js"></script>
14
+ <style>
15
+ multi-embed-player{
16
+ width: 480px;
17
+ height: 270px;
18
+ max-width: 100%;
19
+ }
20
+ </style>
21
+
22
+ ## Support service list
23
+
24
+ - youtube
25
+ - bilibili
26
+ - nicovideo
27
+ - soundcloud
28
+
29
+ ## Embed various service
30
+
31
+ ### Youtube
32
+
33
+ ```html
34
+ <multi-embed-player videoid="_NC_pqMt5rY" service="youtube"></multi-embed-player>
35
+ ```
36
+
37
+ <!--live demo-->
38
+ <multi-embed-player videoid="_NC_pqMt5rY" service="youtube"></multi-embed-player>
39
+
40
+ ### Bilibili
41
+
42
+ ```html
43
+ <multi-embed-player videoid="BV19e411Q7Lr" service="bilibili"></multi-embed-player>
44
+ ```
45
+
46
+ <!--live demo-->
47
+ <multi-embed-player videoid="BV19e411Q7Lr" service="bilibili"></multi-embed-player>
48
+
49
+ ### Nicovideo
50
+
51
+ ```html
52
+ <multi-embed-player videoid="sm9" service="niconico"></multi-embed-player>
53
+ ```
54
+
55
+ <!--live demo-->
56
+ <multi-embed-player videoid="sm9" service="niconico"></multi-embed-player>
57
+
58
+ ### Soundcloud
59
+
60
+ ```html
61
+ <multi-embed-player videoid="tkrism/reflection-feat-nicamoq" service="soundcloud"></multi-embed-player>
62
+ ```
63
+
64
+ <!--live demo-->
65
+ <multi-embed-player videoid="tkrism/reflection-feat-nicamoq" service="soundcloud"></multi-embed-player>
66
+
67
+ ## Error redirect
68
+
69
+ Sometimes video may delete from a service, but you can redirect to other video.
70
+
71
+ ### register redirect video
72
+
73
+ ```html
74
+ <multi-embed-player videoid="sm9" service="niconico" subVideoid="Ft1oytmXg3Y" subService="youtube"></multi-embed-player>
75
+ ```
76
+
77
+ <multi-embed-player videoid="sm9" service="niconico" subVideoid="Ft1oytmXg3Y" subService="youtube"></multi-embed-player>
78
+
79
+ In this way if firest video was not found, then redirect to second video.
80
+
81
+ Also if first video was not found, then show second video thumbnails instead of first video thumbnails.
@@ -0,0 +1,57 @@
1
+ ---
2
+ weight: 1300
3
+ title: "Thumbnail_click"
4
+ description: ""
5
+ icon: "article"
6
+ date: "2023-11-04T16:05:19+09:00"
7
+ lastmod: "2023-11-04T16:05:19+09:00"
8
+ draft: false
9
+ toc: true
10
+ ---
11
+
12
+ <!--load api-->
13
+
14
+ <script src="https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/multi_embed_player.js"></script>
15
+
16
+ <style>
17
+ multi-embed-player{
18
+ width: 480px;
19
+ height: 270px;
20
+ max-width: 100%;
21
+ }
22
+ multi-embed-player[type="thumbnail-click"] {
23
+ min-width: 240px;
24
+ min-height: 135px;
25
+ }
26
+ </style>
27
+
28
+ ## Thumbnail click
29
+
30
+ Thumbnail click is suitable for video list page.
31
+
32
+ ### Example
33
+
34
+ ```html
35
+ <style>
36
+ multi-embed-player[type="thumbnail-click"] {
37
+ min-width: 240px;
38
+ min-height: 135px;
39
+ }
40
+ </style>
41
+ <multi-embed-player id="mep_player" type="player"></multi-embed-player>
42
+ <div style="display:flex;overflow-x:scroll">
43
+ <multi-embed-player videoid="H4C23eF_r2Q" service="youtube" type="thumbnail-click" for="mep_player"></multi-embed-player>
44
+ <multi-embed-player videoid="Xl6gqwcLyPg" service="youtube" type="thumbnail-click" for="mep_player"></multi-embed-player>
45
+ <multi-embed-player videoid="BV1xu4y1m7bi" service="bilibili" type="thumbnail-click" for="mep_player"></multi-embed-player>
46
+ <multi-embed-player videoid="8izwhpwkfuor/hop" service="soundcloud" type="thumbnail-click" for="mep_player"></multi-embed-player>
47
+ </div>
48
+ ```
49
+
50
+ <!--live demo-->
51
+ <multi-embed-player id="mep_player" type="player"></multi-embed-player>
52
+ <div style="display:flex;overflow-x:scroll">
53
+ <multi-embed-player videoid="H4C23eF_r2Q" service="youtube" type="thumbnail-click" for="mep_player"></multi-embed-player>
54
+ <multi-embed-player videoid="Xl6gqwcLyPg" service="youtube" type="thumbnail-click" for="mep_player"></multi-embed-player>
55
+ <multi-embed-player videoid="BV1xu4y1m7bi" service="bilibili" type="thumbnail-click" for="mep_player"></multi-embed-player>
56
+ <multi-embed-player videoid="8izwhpwkfuor/hop" service="soundcloud" type="thumbnail-click" for="mep_player"></multi-embed-player>
57
+ </div>
@@ -0,0 +1,8 @@
1
+ module documents
2
+
3
+ go 1.21.3
4
+
5
+ require (
6
+ github.com/colinwilson/lotusdocs v0.1.0 // indirect
7
+ github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20200 // indirect
8
+ )
@@ -0,0 +1,14 @@
1
+ github.com/colinwilson/lotusdocs v0.1.0 h1:oTC8pAYQp9XDNaUwE4SEY+id3ByNELxIIFrktYEGxYA=
2
+ github.com/colinwilson/lotusdocs v0.1.0/go.mod h1:9zu2REJDi+zdPRcR5/bRYSUR7gkNF4NQLvV38SEoCP8=
3
+ github.com/colinwilson/lotusdocs v0.2.0 h1:vG/frwOUKPRpF3xuXk177Pw73aFrFcT2zRgTI9FiiMY=
4
+ github.com/colinwilson/lotusdocs v0.2.0/go.mod h1:hGOYA9Ym3MA3YGmm9YHo9HkJxlHCyPNaYeFwvn/IFJY=
5
+ github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20200 h1:SmpwwN3DNzJWbV+IT8gaFu07ENUFpCvKou5BHYUKuVs=
6
+ github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20200/go.mod h1:kx8MBj9T7SFR8ZClWvKZPmmUxBaltkoXvnWlZZcSnYA=
7
+ github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20400 h1:L6+F22i76xmeWWwrtijAhUbf3BiRLmpO5j34bgl1ggU=
8
+ github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.20300.20400/go.mod h1:uekq1D4ebeXgduLj8VIZy8TgfTjrLdSl6nPtVczso78=
9
+ github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs=
10
+ github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI=
11
+ github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
12
+ github.com/twbs/bootstrap v5.3.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
13
+ github.com/twbs/bootstrap v5.3.6+incompatible h1:efmXVyq839m5QQ0+JBUdQQ1TrmoBqvQ5kRhUueKsH+4=
14
+ github.com/twbs/bootstrap v5.3.6+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=
@@ -0,0 +1,18 @@
1
+ baseURL = 'https://example.com/'
2
+ languageCode = 'en-us'
3
+ title = 'multi embed player documents'
4
+
5
+ enableRobotsTXT = true
6
+
7
+ [module]
8
+ [[module.imports]]
9
+ path = "github.com/colinwilson/lotusdocs"
10
+ disable = false
11
+ [[module.imports]]
12
+ path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
13
+ disable = false
14
+
15
+ [markup]
16
+ [markup.goldmark]
17
+ [markup.goldmark.renderer]
18
+ unsafe = true