multi_embed_player 3.0.1 → 3.1.0

package/documents/content/docs/reference/iframe_class.md

@@ -0,0 +1,230 @@
+---
+weight: 5200
+title: "Iframe_class"
+description: ""
+icon: "article"
+date: "2023-11-04T18:33:04+09:00"
+lastmod: "2023-11-04T18:33:04+09:00"
+draft: false
+toc: true
+---
+
+## common object
+
+### Load_video_option_object
+
+{{< table "table-responsive" >}}
+
+|variable name|type|require|default value|description|
+|---|---|---|---|---|
+|videoId|string|true||video id for player|
+|startSeconds|number|false|0|start seconds for player|
+|endSeconds|number|false||end seconds for player|
+
+{{< /table >}}
+
+### player_content_object
+
+{{< table "table-responsive" >}}
+
+|variable name|type|require|default value|description|
+|---|---|---|---|---|
+|videoId|string|true||video id for player|
+|startSeconds|number|false|0|start seconds for player|
+|endSeconds|number|false||end seconds for player|
+|playerVars|Object{urlparameter:value}|false|{}|player vars for player|
+|width|number|true||width for player|
+|height|number|true||height for player|
+
+{{< /table >}}
+
+## common event
+
+{{< table "table-responsive" >}}
+
+| Event Name | Type | Description | value |
+|------------|------|-------------|-------|
+| `onReady` | Event | Fired when the player is ready | None |
+| `onError` | CustomEvent | Fired when an error occurs | [Error code](/docs/reference/error_code) | 
+| `onStateChange` | CustomEvent | Fired when the player's state changes | player state |
+| `onEndVideo` | Event | Fired when the video playback ends | None |
+| `executeSecound` | Event | Fired to trigger secondary action (error handling) | None |
+
+{{< /table >}}
+
+## mep_niconico class
+
+defined at [niconico.js](https://github.com/bonjinnorenka/multi_embed_player/blob/main/iframe_api/niconico.js)
+
+### variable list
+
+{{< table "table-responsive" >}}
+
+|variable name|type|default value|description|
+|---|---|---|---|
+|playerId|number|0|player id for detect iframe|
+|origin|string|https://embed.nicovideo.jp|iframe origin|
+|localStorageCheck|null or boolean|null|localStorage check result **compatibility**|
+
+{{< /table >}}
+
+### function list
+
+{{< table "table-responsive" >}}
+
+|function name|arguments|response|description|
+|---|---|---|---|
+|constructor|replacing_element:Node Or String(dom id),player_content_object,player_set_event_function:function||constructor of class|
+|cueVideoById|Load_video_option_object||cue video by id for player|
+|loadVideoById|Load_video_option_object||load video by id for player|
+|getRealDuration||number(seconds)|return duration between start and end seconds|
+|playVideo|||play video for player|
+|pauseVideo|||pause video for player|
+|getCurrentTime||number(seconds)|get curent time for player|
+|getDuration||number(seconds)|get duration for player|
+|getTitle||string|get title for playing video|
+|isMuted||boolean|check mute status for player|
+|getVolume||number(0-100)|get volume for player|
+|seekTo|number(seconds)||seek to time for player|
+|displayComment|boolean||display comment for player|
+|mute|||mute for player|
+|unMute|||unmute for player|
+|setVolume|number(0-100)||set volume for player|
+|getPlayerState||number|get player state<br>0->not playing only thumbnail<br>1->onloaded(include cue)<br>2->playing<br>3->paused<br>4->video ended
+
+{{< /table >}}
+
+## mep_bilibili class
+
+defined at [bilibili.js](https://github.com/bonjinnorenka/multi_embed_player/blob/main/iframe_api/bilibili.js)
+
+### variable list
+
+{{< table "table-responsive" >}}
+
+|variable name|type|default value|description|
+|---|---|---|---|
+|localStorageCheck|null or boolean|null|localStorage check result|
+| mep_extention_bilibili| boolean |false| extention mode|
+| api_endpoint| string |https://iframe_api.ryokuryu.workers.dev| api endpoint you must change it or set cors proxy|
+| no_extention_error| string | "No extention error description"| error message when extention is not found|
+| player_base_url| string | ""| base url for player it will auto select|
+|bilibili_api_cache|Object{videoId:video_info}|{}|cache for bilibili api|
+| cors_proxy | string | "" | cors proxy endpoint|
+
+{{< /table >}}
+
+### function list
+
+{{< table "table-responsive" >}}
+
+|function name|arguments|response|description|
+|---|---|---|---|
+|constructor|replacing_element:Node Or String(dom id),player_content_object,player_set_event_function:function||constructor of class|
+|cueVideoById|Load_video_option_object||cue video by id for player|
+|loadVideoById|Load_video_option_object||load video by id for player|
+| getCurrentTime | | number(seconds) | get curent time for player |
+|playVideo|||play video for player|
+|pauseVideo|||pause video for player|
+|seekTo|number(seconds)||seek to time for player|
+|getRealDuration||promise number(seconds) if no extention|return duration between start and end seconds|
+|getDuration||promise number(seconds) if no extention|get duration for player|
+|getTitle||promise string if no extention|get title for playing video|
+|getPlayerState||promise number|get player state<br>0->not playing only thumbnail<br>1->onloaded(include cue)<br>2->playing<br>3->paused<br>4->video ended
+|setVolume|number(0-100)||set volume for player **not working if no extention**|
+|getVolume||number(0-100)|get volume for player **not working if no extention**|
+|isMuted||boolean|check mute status for player **not working if no extention**|
+|mute|||mute for player **not working if no extention**|
+|unMute|||unmute for player **not working if no extention**|
+|displayComment|boolean||display comment for player **not working if no extention**|
+
+{{< /table >}}
+
+## mep_soundcloud class
+
+defined at [soundcloud.js](https://github.com/bonjinnorenka/multi_embed_player/blob/main/iframe_api/soundcloud.js)
+
+### variable list
+
+{{< table "table-responsive" >}}
+
+|variable name|type|default value|description|
+|---|---|---|---|
+|soundcloud_api_loaded|boolean or null|null|soundcloud api loaded status|
+|soundcloud_api_promise|Array of function|[]|after load soundcloud api call this functions|
+|numericRegex|RegExp|/^[0-9]+$/|numeric regex|
+
+{{< /table >}}
+
+### function list
+
+{{< table "table-responsive" >}}
+
+|function name|arguments|response|description|
+|---|---|---|---|
+|constructor|replacing_element:Node Or String(dom id),player_content_object,player_set_event_function:function||constructor of class|
+|playVideo|||play video for player|
+|pauseVideo|||pause video for player|
+|getCurrentTime||number(seconds)|get curent time for player|
+|getDuration||number(seconds)|get duration for player|
+|seekTo|number(seconds)||seek to time for player|
+|setVolume|number(0-100)||set volume for player|
+|mute|||mute for player|
+|unMute|||unmute for player|
+|isMuted||boolean|check mute status for player|
+|getVolume||number(0-100)|get volume for player|
+|getPlayerState||number|get player state<br>0->not playing only thumbnail<br>1->onloaded(include cue)<br>2->playing<br>3->paused<br>4->video ended|
+|getTitle||string|get title for playing video|
+|loadVideoById|Load_video_option_object||load video by id for player|
+|cueVideoById|Load_video_option_object||cue video by id for player|
+|getRealDuration||number(seconds)|return duration between start and end seconds|
+
+{{< /table >}}
+
+## mep_youtube class
+
+defined at [youtube.js](https://github.com/bonjinnorenka/multi_embed_player/blob/main/iframe_api/youtube.js)
+
+### variable list
+
+{{< table "table-responsive" >}}
+
+|variable name|type|default value|description|
+|---|---|---|---|
+|youtube_api_loaded|number|0|YouTube API loaded status (0: not loaded, 1: loading, 2: loaded)|
+|youtube_api_promise|Array of function|[]|Functions to call after loading YouTube API|
+
+{{< /table >}}
+
+### function list
+
+{{< table "table-responsive" >}}
+
+|function name|arguments|response|description|
+|---|---|---|---|
+|constructor|replacing_element: Node Or String (dom id), content: mep_youtube_content, player_set_event_function: function||Constructor of class|
+|playVideo|||Play video for player|
+|pauseVideo|||Pause video for player|
+|getCurrentTime||number (seconds)|Get current time of video|
+|getDuration||number (seconds)|Get duration of video|
+|getRealDulation||number (seconds)|Get actual duration between start and end times|
+|seekTo|time: number (seconds)||Seek to specified time in video|
+|setVolume|volume: number (0-100)||Set volume for player|
+|mute|||Mute player|
+|unMute|||Unmute player|
+|isMuted||boolean|Check mute status of player|
+|getVolume||number (0-100)|Get volume of player|
+|getPlayerState||number|Get player state<br>0->unstarted<br>1->buffering<br>2->playing<br>3->paused<br>4->ended|
+|getTitle||string|Get title of current video|
+|loadVideoById|content: mep_youtube_load_object or string, [startSeconds: number]||Load video by ID with autoplay|
+|cueVideoById|content: mep_youtube_load_object or string, [startSeconds: number]||Cue video by ID without autoplay|
+
+{{< /table >}}
+
+## AI Assistance Disclosure
+This documentation page includes content generated with the assistance of AI tools. Specifically:
+
+Claude 3.5 Sonnet
+GitHub Copilot
+
+All AI-generated content has been reviewed and edited by a human to ensure accuracy and relevance.

package/documents/content/docs/reference/multi_embed_player_class.md

@@ -0,0 +1,113 @@
+---
+weight: 5100
+title: "Multi_embed_player_class"
+description: ""
+icon: "article"
+date: "2023-11-04T16:48:57+09:00"
+lastmod: "2023-11-04T16:48:57+09:00"
+draft: false
+toc: true
+---
+
+Defined at [multi_embed_player.js](https://github.com/bonjinnorenka/multi_embed_player/blob/main/multi_embed_player.js)
+
+## variable list of multi_embed_player class
+
+{{< table "table-responsive" >}}
+
+|variable name|type|default value|description|
+|---|---|---|---|
+|cors_proxy_url|string||cors proxy url|
+|iframe_api_endpoint|string|https://iframe_api.ryokuryu.workers.dev|[iframe api endpoint](/docs/reference/iframe_api)|
+|follow_GDPR|boolean|false|follow GDPR mode|
+|script_origin|string|https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/|script origin|
+|mep_status_load_api|Object|{serviceName:number}|load api status <br>0->not load<br>1->loading<br>2->loaded|
+|mep_load_api_promise|Object|{serviceName:[function]}|waiting load api function<br>functions will be called when api loaded|
+|api_cache|Object|{serviceName:{[iframe api response](/docs/reference/iframe_api)}}|api cache of iframe api response|
+|GDPR_accept_promise|Object|{serviceName:[function]}|waiting GDPR accept function<br>functions will be called when GDPR accepted|
+|iframe_api_class|Object|{}|iframe sub api class<br>add value after iframe sub api loaded|
+|GDPR_accepted|Object|{serviceName:boolean}|GDPR accepted status|
+|possible_direct_access_services|string[]|[servicename]|services that can be accessed directly when GDPR accepted|
+|tearms_policy_service|string|{servicename:policy url}|tearms policy url for specific service|
+
+{{< /table >}}
+
+## function list of multi_embed_player class instance
+
+Not include function start with '#'.
+
+{{< table "table-responsive" >}}
+
+|function name|arguments|response|description|
+|---|---|---|---|
+|connectedCallback|||called when custom element connected|
+|loadVideoById|{loadVideoByIdOptions},autoplay:boolean(optional),sub:boolean(optional internal compatible)||load video by id for player|
+|playVideo|||play video for player|
+|pauseVideo|||pause video for player|
+|stopVideo|||pause video for player **compatibility**|
+|getcurentTime||bilibili->Promise of number(seconds) <br>others -> number(seconds)|get curent time for player|
+|seekTo|number(seconds)||seek to time for player|
+|mute|||mute for player|
+|unMute|||unmute for player|
+|isMuted||bilibili->promise of boolean<br>others->boolean|check mute status for player|
+|setVolume|number(0-100)||set volume for player|
+|getVolume||bilibili->promise of number(0-100)<br>others->number(0-100)|get volume for player|
+|getDuration||bilibili->promise of number(seconds)<br>others->(seconds)|get duration for player|
+|getRealDuration||bilibili->promise of number(seconds)<br>others->number(seconds)|return duration between start and end seconds|
+|getRelativeCurrentTime||bilibili->promise of number(seconds)<br>others->number(seconds)|return current time count from start seconds|
+|getPercentOfCurrentTime||bilibili->promise of number(seconds)<br>others->number(seconds)|return current time percent from dulation<br>NOTE:sometimes return over 100% value|
+|relativeSeekTo_ct|number(seconds)||seek to time count from current secounds|
+|relativeSeekTo_ss|number(seconds)||seek to time count from start secounds|
+|getPlayerState||number|get player state<br>-1->not set video mainly before embed<br>0->not playing only thumbnail<br>1->onloaded(include cue)<br>2->playing<br>3->paused<br>4->video ended|
+
+{{< /table >}}
+
+## event list of multi_embed_player class
+
+{{< table "table-responsive" >}}
+
+| Event Name | Type | Description | value |
+|------------|------|-------------|-------|
+| `onReady` | Event | Fired when the player is ready | None |
+| `onError` | CustomEvent | Fired when an error occurs | [Error code](/docs/reference/error_code) | 
+| `onStateChange` | CustomEvent | Fired when the player's state changes | player state |
+| `onEndVideo` | Event | Fired when the video playback ends | None |
+| `executeSecound` | Event | Fired to trigger secondary action (error handling) | None |
+
+{{< /table >}}
+
+### loadVideoByIdOptions
+
+{{< table "table-responsive" >}}
+
+|variable name|type|require|default value|description|
+|---|---|---|---|---|
+|videoId|string|true||video id if call array is defined this value is ignored and not required|
+|service|string|true||service name if call array is defined this value is ignored not required|
+|startSeconds|number|false|0|start seconds|
+|endSeconds|number|false||end seconds|
+|call_array|[call_video_object]|false||call array|
+|call_array_index|number|false|0|call array index|
+|subVideoId|string|false||sub video id **compatibility**|
+|subService|string|false||sub service name **compatibility**|
+
+{{< /table >}}
+
+### call_video_object
+
+{{< table "table-responsive" >}}
+
+|variable name|type|require|default value|description|
+|---|---|---|---|---|
+|videoId|string|true||video id|
+|service|string|true||service name|
+
+{{< /table >}}
+
+## AI Assistance Disclosure
+This documentation page includes content generated with the assistance of AI tools. Specifically:
+
+Claude 3.5 Sonnet
+GitHub Copilot
+
+All AI-generated content has been reviewed and edited by a human to ensure accuracy and relevance.

package/documents/content/docs/reference/reserved_words.md

@@ -0,0 +1,71 @@
+---
+weight: 10000
+title: "Reserved_words"
+description: ""
+icon: "article"
+date: "2023-11-04T18:11:44+09:00"
+lastmod: "2023-11-04T18:11:44+09:00"
+draft: false
+toc: true
+---
+
+**multi_embed_player***
+
+**mep_***
+
+will be reserved words.
+
+## HTML tag
+
+{{< table "table-responsive" >}}
+
+| tag name | description |
+| --- | --- |
+| multi-embed-player | main tag |
+
+{{< /table >}}
+
+## Javascript
+
+{{< table "table-responsive" >}}
+
+| variable name |type| description |
+| --- | --- | --- |
+| multi_embed_player_set_variable | function | set variable for multi_embed_player |
+| multi_embed_player_save_GDPR_status | function | save GDPR status |
+| multi_embed_player_GDPR_reviever | function | recieve GDPR status |
+| multi_embed_player_fetch_iframe_api | function | fetch iframe api |
+| multi_embed_player | class | multi_embed_player class |
+| mep_niconico | class | niconico iframe class |
+| mep_bilibili | class | bilibili iframe class |
+| mep_soundcloud | class | soundcloud iframe class |
+| mep_youtube | class | youtube iframe class |
+
+{{< /table >}}
+
+## Local storage
+
+{{< table "table-responsive" >}}
+
+| key name | description |
+| --- | --- |
+| multi_embed_player_GDPR_accepted | save GDPR status |
+
+{{< /table >}}
+
+## Class name(CSS)
+
+{{< table "table-responsive" >}}
+
+| class name | description |
+| --- | --- |
+|multi-embed-player-CSS|multi-embed-player tag default CSS|
+|mep_youtube|youtube iframe default CSS|
+|mep_niconico|niconico iframe default CSS|
+|mep_bilibili|bilibili iframe default CSS|
+|mep_soundcloud|soundcloud iframe default CSS|
+|mep_bilibili_transparent|bilibili iframe transparent CSS(use for bilibili pause over wrap)|
+|mep_load_animation|load animation CSS use for this defined or not|
+|mep_loading_animation|loading animation CSS use bilibili loding animation|
+
+{{< /table >}}

package/documents/content/docs/usage/GDPR_mode.md

@@ -0,0 +1,77 @@
+---
+weight: 999
+title: "GDPR_mode"
+description: ""
+icon: "article"
+date: "2023-11-04T13:30:29+09:00"
+lastmod: "2023-11-04T13:30:29+09:00"
+draft: false
+toc: true
+---
+
+## Requirements for GDPR mode
+
+- [iframe api or cors proxy](/docs/install).
+- multi_embed_player.js not working in sub iframe api.
+
+## How to turn on GDPR mode
+
+### Enable GDPR mode in all player in HTML
+
+You need to set `follow_GDPR` to `true` in `multi_embed_player_set_variable` function.
+
+```html
+<!--before multi_embed_player.js script tag-->
+<script type="text/javascript">
+    const multi_embed_player_set_variable = (classname)=>{
+        //if you want to use GDPR mode all player
+        classname.follow_GDPR = true;
+
+        //if you use iframe api
+        //classname.iframe_api_endpoint = "YOUR IFRAME API ENDPOINT LIKE https://iframe_api.ryokuryu.workers.dev";
+
+        //if you use cors proxy
+        //classname.cors_proxy_url = "YOUR CORS PROXY URL LIKE https://cors-anywhere.herokuapp.com";
+    }
+</script>
+```
+
+### Enable GDPR mode in specific player in HTML
+
+You need to add attribute `follow_GDPR` to `true` in `multi_embed_player` tag.
+
+```html
+<multi-embed-player videoid="_NC_pqMt5rY" service="youtube" follow_GDPR="true"></multi-embed-player>
+```
+
+<!--live demo of this code-->
+<style>
+    multi-embed-player{
+        width: 480px;
+        height: 270px;
+        max-width: 100%;
+    }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/multi_embed_player@3/dist/multi_embed_player.js"></script>
+<multi-embed-player videoid="_NC_pqMt5rY" service="youtube" follow_GDPR="true"></multi-embed-player>
+
+## Notice
+
+There is no way to back down accept to access external service from embed content in default.
+
+So you may need to set back down accept to access external service button.
+
+This is example of this button.
+
+```html
+<button onclick="multi_embed_player_GDPR_accepted_all_back_down()">Back down accept to access external service in embed content</button>
+```
+
+<!--live demo of this code-->
+<button onclick="multi_embed_player_GDPR_accepted_all_back_down()">Back down accept to access external service in embed content</button>
+
+This way has one known issue.
+
+After use button, you need to reload page to use embed content.
+
+If not to do this, embed content will be load content from external service which is not granted to access because of GDPR mode.

package/documents/content/docs/usage/_index.md

@@ -0,0 +1,10 @@
+---
+weight: 900
+title: "Usage"
+description: ""
+icon: "article"
+date: "2023-11-04T13:30:39+09:00"
+lastmod: "2023-11-04T13:30:39+09:00"
+draft: false
+toc: true
+---