multi_embed_player 3.1.0 → 3.1.1
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.
- package/dist/iframe_api/bilibili.d.ts +210 -0
- package/dist/iframe_api/bilibili.d.ts.map +1 -0
- package/dist/iframe_api/bilibili.js +1035 -0
- package/dist/iframe_api/bilibili.js.map +1 -0
- package/dist/iframe_api/niconico.d.ts +191 -0
- package/dist/iframe_api/niconico.d.ts.map +1 -0
- package/dist/iframe_api/niconico.js +325 -0
- package/dist/iframe_api/niconico.js.map +1 -0
- package/dist/iframe_api/soundcloud.d.ts +152 -0
- package/dist/iframe_api/soundcloud.d.ts.map +1 -0
- package/dist/iframe_api/soundcloud.js +360 -0
- package/dist/iframe_api/soundcloud.js.map +1 -0
- package/dist/iframe_api/youtube.d.ts +96 -0
- package/dist/iframe_api/youtube.d.ts.map +1 -0
- package/dist/iframe_api/youtube.js +269 -0
- package/dist/iframe_api/youtube.js.map +1 -0
- package/dist/multi_embed_player.d.ts +215 -0
- package/dist/multi_embed_player.d.ts.map +1 -0
- package/dist/multi_embed_player.js +921 -0
- package/dist/multi_embed_player.js.map +1 -0
- package/package.json +1 -1
- package/.github/workflows/build-and-deploy.yml +0 -44
- package/.gitmodules +0 -3
- package/browserExtention/chrome/background.js +0 -55
- package/browserExtention/chrome/extention.json +0 -1
- package/browserExtention/chrome/liteplayer.js +0 -26439
- package/browserExtention/chrome/manifest.json +0 -31
- package/browserExtention/chrome/player-selector.js +0 -1854
- package/browserExtention/firefox/background.js +0 -27
- package/browserExtention/firefox/extention.json +0 -1
- package/browserExtention/firefox/liteplayer.js +0 -26439
- package/browserExtention/firefox/manifest.json +0 -19
- package/browserExtention/firefox/player-selector.js +0 -1854
- package/documents/.hugo_build.lock +0 -0
- package/documents/archetypes/default.md +0 -5
- package/documents/assets/jsconfig.json +0 -11
- package/documents/content/docs/install.md +0 -103
- package/documents/content/docs/quickstart.md +0 -51
- package/documents/content/docs/reference/HTML.md +0 -31
- package/documents/content/docs/reference/_index.md +0 -10
- package/documents/content/docs/reference/error_code.md +0 -23
- package/documents/content/docs/reference/iframe_api.md +0 -737
- package/documents/content/docs/reference/iframe_class.md +0 -230
- package/documents/content/docs/reference/multi_embed_player_class.md +0 -113
- package/documents/content/docs/reference/reserved_words.md +0 -71
- package/documents/content/docs/usage/GDPR_mode.md +0 -77
- package/documents/content/docs/usage/_index.md +0 -10
- package/documents/content/docs/usage/custom_playlist.md +0 -239
- package/documents/content/docs/usage/embed_api.md +0 -163
- package/documents/content/docs/usage/embed_various_service.md +0 -81
- package/documents/content/docs/usage/thumbnail_click.md +0 -57
- package/documents/go.mod +0 -8
- package/documents/go.sum +0 -14
- package/documents/hugo.toml +0 -18
- package/documents/layouts/partials/docs/sidebar.html +0 -117
- package/documents/layouts/partials/landing/features.html +0 -47
- package/documents/layouts/robots.txt +0 -4
- package/documents/static/_headers +0 -7
- package/documents/static/localStorageCheck.html +0 -27
- package/documents/static/no_extention.json +0 -1
- package/example.html +0 -27
- package/extention.json +0 -1
- package/icon/video_not_found.odg +0 -0
- package/icon/video_not_found.svgz +0 -0
- package/iframe_api/bilibili.ts +0 -1095
- package/iframe_api/niconico.ts +0 -429
- package/iframe_api/soundcloud.ts +0 -450
- package/iframe_api/youtube.ts +0 -311
- package/multi_embed_player.ts +0 -989
- package/player_api_gate/bilibili-api-gate/cgi/cpp/bilibili-api-gate-cgi.cpp +0 -281
- package/player_api_gate/bilibili-api-gate/cgi/go/src.go +0 -46
- package/player_api_gate/bilibili-api-gate/cloudflare_workers/package-lock.json +0 -1356
- package/player_api_gate/bilibili-api-gate/cloudflare_workers/package.json +0 -12
- package/player_api_gate/bilibili-api-gate/cloudflare_workers/src/index.js +0 -50
- package/player_api_gate/bilibili-api-gate/cloudflare_workers/wrangler.toml +0 -3
- package/player_api_gate/iframe-api-ts/.editorconfig +0 -12
- package/player_api_gate/iframe-api-ts/.prettierrc +0 -6
- package/player_api_gate/iframe-api-ts/package-lock.json +0 -3054
- package/player_api_gate/iframe-api-ts/package.json +0 -18
- package/player_api_gate/iframe-api-ts/src/bilibili.ts +0 -49
- package/player_api_gate/iframe-api-ts/src/index.ts +0 -35
- package/player_api_gate/iframe-api-ts/src/niconico.ts +0 -95
- package/player_api_gate/iframe-api-ts/src/soundcloud.ts +0 -38
- package/player_api_gate/iframe-api-ts/src/types.ts +0 -115
- package/player_api_gate/iframe-api-ts/src/url-proxy.ts +0 -29
- package/player_api_gate/iframe-api-ts/src/utils.ts +0 -82
- package/player_api_gate/iframe-api-ts/src/youtube.ts +0 -41
- package/player_api_gate/iframe-api-ts/test/bilibili.spec.ts +0 -47
- package/player_api_gate/iframe-api-ts/test/env.d.ts +0 -3
- package/player_api_gate/iframe-api-ts/test/index.spec.ts +0 -59
- package/player_api_gate/iframe-api-ts/test/niconico.spec.ts +0 -55
- package/player_api_gate/iframe-api-ts/test/soundcloud.spec.ts +0 -55
- package/player_api_gate/iframe-api-ts/test/tsconfig.json +0 -8
- package/player_api_gate/iframe-api-ts/test/url-proxy.spec.ts +0 -46
- package/player_api_gate/iframe-api-ts/test/youtube.spec.ts +0 -45
- package/player_api_gate/iframe-api-ts/tsconfig.json +0 -45
- package/player_api_gate/iframe-api-ts/vitest.config.mts +0 -11
- package/player_api_gate/iframe-api-ts/worker-configuration.d.ts +0 -5768
- package/player_api_gate/iframe-api-ts/wrangler.jsonc +0 -47
- package/player_api_gate/iframe_api/.editorconfig +0 -13
- package/player_api_gate/iframe_api/.prettierrc +0 -6
- package/player_api_gate/iframe_api/package-lock.json +0 -1307
- package/player_api_gate/iframe_api/package.json +0 -12
- package/player_api_gate/iframe_api/src/bilibili_api.js +0 -60
- package/player_api_gate/iframe_api/src/index.js +0 -47
- package/player_api_gate/iframe_api/src/niconico_api.js +0 -112
- package/player_api_gate/iframe_api/src/soundcloud_api.js +0 -57
- package/player_api_gate/iframe_api/src/url_proxy.js +0 -28
- package/player_api_gate/iframe_api/src/youtube_api.js +0 -44
- package/player_api_gate/iframe_api/wrangler.toml +0 -51
- package/player_api_gate/niconico-imager/cgi/go/src.go +0 -74
- package/player_api_gate/niconico-imager/cloudflare_workers/package-lock.json +0 -2175
- package/player_api_gate/niconico-imager/cloudflare_workers/package.json +0 -12
- package/player_api_gate/niconico-imager/cloudflare_workers/src/index.js +0 -78
- package/player_api_gate/niconico-imager/cloudflare_workers/wrangler.toml +0 -3
- package/test_script.html +0 -172
- package/tsconfig.json +0 -36
|
@@ -1,239 +0,0 @@
|
|
|
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.
|
|
@@ -1,163 +0,0 @@
|
|
|
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>
|
|
@@ -1,81 +0,0 @@
|
|
|
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.
|
|
@@ -1,57 +0,0 @@
|
|
|
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>
|
package/documents/go.mod
DELETED
package/documents/go.sum
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
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=
|
package/documents/hugo.toml
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
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
|