multi_embed_player 3.0.1 → 3.1.0

package/iframe_api/bilibili.ts

@@ -0,0 +1,1095 @@
+// Notice! This file JSDOC is generated by gitHub copilot.
+// So some of this JSDOC is not correct.
+// Please refer to documents https://multi-embed-player.pages.dev/docs/reference/iframe_class/#mep_bilibili-class
+
+interface mep_bilibili_playerVars {
+    startSeconds?: number;
+    endSeconds?: number;
+    autoplay?: number;
+    displayComment?: number;
+    fastLoad?: number;
+    play_control_wrap?: number;
+}
+
+interface mep_bilibili_content {
+    videoId: string;
+    width: number;
+    height: number;
+    playerVars: mep_bilibili_playerVars;
+    overwrite?: boolean;
+    displayComment?: number;
+    play_control_wrap?: number;
+    startSeconds?: number;
+    endSeconds?: number;
+}
+
+interface BilibiliApiResponse {
+    code: number;
+    data?: {
+        title: string;
+        duration: number;
+        pic?: string;
+    };
+    image_base64?: string | null;
+}
+
+interface BilibiliPlayerState {
+    getPlayerState: string;
+    currentTime?: number;
+    dulation?: number;
+    volumeValue?: number;
+    getTitle?: string;
+}
+
+interface BilibiliQuery {
+    bvid: string;
+    t?: number;
+    autoplay: 0 | 1;
+    danmaku: 0 | 1;
+}
+
+/**
+ * Class representing a Bilibili player.
+ * @class
+ * @classdesc This class provides methods to control a Bilibili player and handle errors.
+ * @property {boolean} localStorageCheck - A flag indicating whether the local storage is accessible.
+ * @property {boolean} mep_extension_bilibili - A flag indicating whether the extension is installed.
+ * @property {string} api_endpoint - The API endpoint for the player.
+ * @property {string} no_extention_error - The error message to display when the extension is not installed.
+ * @property {string} player_base_url - The base URL for the player.
+ * @property {Object} bilibili_api_cache - The cache for the Bilibili API.
+ * @property {string} cors_proxy - The CORS proxy for the player.
+ * @constructor
+ * @param {HTMLElement|String} replacing_element - The element to replace with the player or the ID of the element to replace with the player.
+ * @param {Object} content - The content to display in the player.
+ * @param {Function} player_set_event_function - The function to set the player event.
+ */
+class mep_bilibili{
+    player: HTMLIFrameElement | HTMLElement = document.createElement("iframe");
+    play_control_wrap: boolean = false;
+    front_error_code: number | undefined;
+    loading: boolean = false;
+    before_mute_volume: number = 100;
+    content_width: number = 0;
+    content_height: number = 0;
+    videoid: string = "";
+    original_replacing_element: HTMLElement = document.createElement("div");
+    player_set_event: ((player: HTMLIFrameElement) => void) | undefined;
+    seek_time: number = 0;
+    seek_time_used: boolean = false;
+    noextention_count_stop: number = 0;
+    state: BilibiliPlayerState = { getPlayerState: "0" };
+    apicache: Record<string, any> = {};
+    no_extention_pause: boolean = false;
+    startSeconds: number = 0;
+    innerStartSeconds: number = 0;
+    autoplay_flag: boolean = false;
+    displayCommentMode: boolean = false;
+    fastload: boolean = false;
+    no_extention_estimate_stop: boolean = false;
+    play_start_time: number = 0;
+    play_start_count_interval: number | undefined;
+    endSeconds: number = -1;
+    end_point_observe: number | undefined;
+    custom_state: number | undefined;
+    estimate_time: number | undefined;
+    start_event_count: number = 0;
+    end_event_count: number = 0;
+    
+    static error_description = {0:"unknown error occurred",1:"data api endpoint invalid or throw error",2:"can't access local storage",3:"data api throw error",4:"player throw error direct"};
+    static localStorageCheck: boolean | null = null;//ニコニコと同じくlocalstorageにアクセスできないと死ぬため
+    static mep_extension_bilibili = false;//拡張機能ないとまともに動かん
+    static api_endpoint = "https://iframe_api.ryokuryu.workers.dev";//please change this if you use
+    static no_extention_error = "you seems not to install mep_extention yet.if it not installed in your browser,you can't exac some function(mute unMute setVolume etc) and some function(getDulation,getPlayerState etc) will return incorrect data which is not reflect real data";
+    static player_base_url = "";//"https://www.bilibili.com/blackboard/webplayer/embed-old.html?"
+    static bilibili_api_cache: Record<string, BilibiliApiResponse> = {};
+    static cors_proxy = "";
+    static currentTime_delay = 2;
+    static bilibili_api_promise: Record<string, {res: ((value: BilibiliApiResponse) => void)[], rej: ((reason?: any) => void)[]}>  = {};
+    constructor(replacing_element: HTMLElement | string, content: mep_bilibili_content, player_set_event_function?: (player: HTMLIFrameElement) => void){
+        if(mep_bilibili.player_base_url==""){
+            const ua = navigator.userAgent;
+            if(ua.indexOf("Firefox")!=-1||ua.indexOf("Edg")!=-1){
+                mep_bilibili.player_base_url = "https://www.bilibili.com/blackboard/webplayer/embed-old.html?";//fast
+            }
+            else{
+                mep_bilibili.player_base_url = "https://player.bilibili.com/player.html?";//load often lazy in japan but this can mute auto play
+            }
+        }
+        (async()=>{
+            await this.#element_constructor(replacing_element,content,player_set_event_function);
+        })();
+    }
+    /**
+     * @private
+     * This function is used for display when player is paused.
+     * When this img clicked the player will be played.
+     */
+    async #image_player(first_load = false){
+        try{
+            let exist_img_children = false;
+            this.player.parentElement?.childNodes.forEach((node)=>{if(node.nodeName==="IMG"){exist_img_children = true}if(node.nodeName==="DIV"&&(node as Element).classList.contains("mep_bilibili_transparent")){(node as Element).remove()}});
+            if(!exist_img_children&&this.play_control_wrap){
+                const img_element = document.createElement("img");
+                img_element.src = (await this.#getVideodataApi())["image_base64"] || "";
+                img_element.width = Number((this.player as HTMLIFrameElement).width);
+                img_element.height = Number((this.player as HTMLIFrameElement).height);
+                img_element.style.width = "100%";
+                img_element.style.height = "100%";
+                img_element.style.objectFit = "cover";
+                img_element.style.cursor = "pointer";
+                img_element.addEventListener("click",()=>{this.playVideo()});
+                this.player.parentElement?.prepend(img_element);
+            }
+            this.player.hidden = true;
+            (this.player as HTMLIFrameElement).src = "";
+            if(first_load){
+                this.player.dispatchEvent(new Event("onReady"));
+            }
+        }
+        catch(e){
+            console.error(e);
+        }
+    }
+    /**
+     * @private
+     * This function is used for display when player is playing.
+     * When this div clicked the player will be paused.
+     */
+    #set_pause_transparent(){
+        let exist_div_children = false;
+        this.player.parentElement?.childNodes.forEach((node)=>{if(node.nodeName==="DIV"&&(node as Element).classList.contains("mep_bilibili_transparent")){exist_div_children = true}});
+        if(!exist_div_children&&this.play_control_wrap){
+            const div_element = document.createElement("div");
+            div_element.classList.add("mep_bilibili_transparent");
+            div_element.style.width = "100%";
+            div_element.style.height = "100%";
+            div_element.style.zIndex = "1";
+            div_element.style.position = "absolute";
+            div_element.style.cursor = "pointer";
+            div_element.addEventListener("click",()=>{this.pauseVideo()});
+            this.player.parentElement?.prepend(div_element);
+        }
+    }
+    /**
+     * @private
+     * This function is used for display when player is loading.
+     */
+    #add_loading_animation(){
+        //https://qiita.com/yoshio-the-end/items/8cec41bad0e817928893
+        let exist_mep_load_animation = false;
+        Array.from(document.head.getElementsByClassName("mep_load_animation")).forEach((element)=>{if(element.nodeName==="STYLE"){exist_mep_load_animation = true}});
+        if(!exist_mep_load_animation){
+            const style_element = document.createElement("style");
+            style_element.classList.add("mep_load_animation");
+            style_element.innerHTML = `
+            .mep_loading_animation{
+                border: 12px solid #fafafa;
+                border-radius: 50%;
+                border-top: 12px solid #3498db;
+                width: 100px;
+                height: 100px;
+                animation: spin 1s linear infinite;
+            }
+            @keyframes spin{
+                0%{
+                    transform: rotate(0deg);
+                }  
+                100%{
+                    transform: rotate(360deg);
+                }
+            }`;
+            document.head.appendChild(style_element);
+        }
+        let exist_animation_div = false;
+        this.player.parentElement?.childNodes.forEach((node)=>{if(node.nodeName==="DIV"&&(node as Element).classList.contains("mep_loading_animation")){exist_animation_div = true}});
+        if(!exist_animation_div){
+            const div_element = document.createElement("div");
+            div_element.classList.add("mep_loading_animation");
+            div_element.style.zIndex = "2";
+            div_element.style.top = "calc(50% - 50px)";
+            div_element.style.left = "calc(50% - 50px)";
+            div_element.style.position = "absolute";
+            this.player.parentElement?.prepend(div_element);
+        }
+    }
+    /**
+     * @private
+     * This function will be called when player is loaded.
+     */
+    #remove_loading_animation(){
+        this.player.parentElement?.childNodes.forEach((node)=>{if(node.nodeName==="DIV"&&(node as Element).classList.contains("mep_loading_animation")){(node as Element).remove()}});
+    }
+    /**
+     * @private
+     * This function is used for display when player calld error.
+     */
+    #add_error_description(){
+        const error_description_document = document.createElement("div");
+        error_description_document.style.width = "100%";
+        error_description_document.style.height = "100%";
+        let error_message = "unknown error occurred";
+        if(this.front_error_code!=undefined&&(window as any).mep_bilibili.error_description[this.front_error_code]!=undefined){
+            error_message = (window as any).mep_bilibili.error_description[this.front_error_code] + "\n front end error code:" + String(this.front_error_code);
+        }
+        error_description_document.innerText = error_message;
+        this.player.replaceWith(error_description_document);
+        this.player = error_description_document;
+        try{
+            this.player.parentElement!.style.backgroundImage = "";
+        }
+        catch{}
+    }
+    /**
+     * @private
+     * This functiuon add css style for player when not exist.
+     */
+    #add_player_css_style(){
+        let exist_mep_bilibili_player_css = false;
+        Array.from(document.head.getElementsByClassName("mep_bilibili_player_css")).forEach((element)=>{if(element.nodeName==="STYLE"){exist_mep_bilibili_player_css = true}});
+        if(!exist_mep_bilibili_player_css){
+            const style_element = document.createElement("style");
+            style_element.classList.add("mep_bilibili_player_css");
+            style_element.innerHTML = `
+            .mep_bilibili_player{
+                border: none;
+                width: 100%;
+                height: 100%;
+            }`;
+            document.head.appendChild(style_element);
+        }
+    }
+    /**
+     * @private
+     * This function is used for display when player can't access local storage.
+     */
+    #add_local_storage_error_description(){
+        const error_description_document = document.createElement("div");
+        error_description_document.style.width = "100%";
+        error_description_document.style.height = "100%";
+        error_description_document.innerText = "Due to not to access localstorage,can't play bilibili video\nyou should turn on third party cookie for this site and then reload this page";
+        this.player.replaceWith(error_description_document);
+        this.player = error_description_document;
+        try{
+            this.player.parentElement!.style.backgroundImage = "";
+        }
+        catch{}
+    }
+    /**
+     * Constructor function for the Bilibili player.
+     * @param {string|HTMLElement} replacing_element - The element to replace with the Bilibili player.
+     * @param {Object} content - The content object containing the video ID and player variables.
+     * @param {Function} player_set_event_function - The function to set event listeners on the player.
+     */
+    async #element_constructor(replacing_element: HTMLElement | string, content: mep_bilibili_content, player_set_event_function?: (player: HTMLIFrameElement) => void): Promise<void> {
+        this.loading = true;
+        this.before_mute_volume = 100;
+        this.content_width = content.width;
+        this.content_height = content.height;
+        if(content?.play_control_wrap == 0){
+            this.play_control_wrap = false;
+        }
+        else{
+            this.play_control_wrap = true;
+        }
+        this.videoid = content["videoId"];
+        if(typeof replacing_element === "string"){
+            const element = document.getElementById(replacing_element);
+            if (!element) throw new Error(`Element with id '${replacing_element}' not found`);
+            replacing_element = element;
+        }
+        this.original_replacing_element = replacing_element;
+        let bilibili_doc = document.createElement("iframe");
+        replacing_element.replaceWith(bilibili_doc);
+        this.player = bilibili_doc;
+        this.#add_loading_animation();
+        this.player.addEventListener("onReady",()=>{this.#remove_loading_animation();this.loading = false},{once:true});
+        this.player.addEventListener("onError",()=>{this.#remove_loading_animation();this.#add_error_description()},{once:true});
+        if(typeof player_set_event_function == "function"){
+            player_set_event_function(this.player as HTMLIFrameElement);
+            this.player_set_event = player_set_event_function;
+        }
+        const api_response = await this.#getVideodataApi();
+        if((api_response as any)?.code!==0){//video can play or not if code not 0 such as 69002 the video maybe delete.
+            console.error("error occured when get bilibili api. Are you sure you overwrite iframe_api endpoint? or cors proxy is not working? or videoid is invalid?");
+            this.front_error_code = 1;
+            this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:1100}}));
+            return;
+        }
+        this.seek_time = -1;
+        this.seek_time_used = true;
+        this.noextention_count_stop = 0;
+        if(typeof content?.videoId !== "string"){
+            console.log("videoId = undefined is not valid")
+        }
+        this.state = {
+            getPlayerState: "PAUSE"
+        };
+        this.apicache = {};
+        if((window as any).mep_bilibili.localStorageCheck!=true){
+            await this.#checkLocalstorage();
+        }
+        if((window as any).mep_bilibili.localStorageCheck===false){
+            this.#add_local_storage_error_description();
+            return;
+        }
+        this.no_extention_pause = false;
+        this.#messageListener();
+        this.startSeconds = 0;
+        this.innerStartSeconds = 0;
+        if(content?.playerVars?.startSeconds!=undefined){
+            this.startSeconds = content?.playerVars?.startSeconds;
+            this.innerStartSeconds = parseInt(content?.playerVars?.startSeconds.toString());
+        }
+        this.autoplay_flag = false;
+        if(content?.playerVars?.autoplay==1){//終わり次第再生
+            this.autoplay_flag = true;
+        }
+        if(content?.playerVars?.displayComment!=undefined){
+            if(content?.playerVars?.displayComment==0){
+                this.displayCommentMode = false;
+            }
+            else if(content?.playerVars?.displayComment==1){
+                this.displayCommentMode = true;
+            }
+            else{
+                this.displayCommentMode = false;
+            }
+        }
+        let bilibili_query: BilibiliQuery = {
+            bvid: "",
+            autoplay: 0,
+            danmaku: 0
+        };
+        if(content["videoId"]==undefined){
+            console.log("invalid videoid:" + content["videoId"] + "so stop loading");
+            return
+        }
+        bilibili_query.bvid = content["videoId"];
+        if(this.startSeconds>0){
+            bilibili_query.t = this.startSeconds;
+        }
+        if(this.autoplay_flag){
+            bilibili_query.autoplay = 1;
+        }
+        else{
+            bilibili_query.autoplay = 0;
+        }
+        if(!this.autoplay_flag&&!(window as any).mep_bilibili.mep_extension_bilibili){
+            this.no_extention_pause = true;
+        }
+        if(this.displayCommentMode){
+            bilibili_query.danmaku = 1;
+        }
+        else{
+            bilibili_query.danmaku = 0;
+        }
+        this.fastload = false;
+        if(content?.playerVars?.fastLoad!=undefined){
+            if(!(window as any).mep_bilibili.mep_extension_bilibili){
+                console.log("fast load ignored because of mep extention not installed in your browser")
+            }
+            else{
+                if(content?.playerVars?.fastLoad==1){
+                    this.fastload = true;
+                }
+            }
+        }
+        let query_string = "";
+        let bilibili_query_keys = Object.keys(bilibili_query) as (keyof BilibiliQuery)[];
+        for(let x=0;x<bilibili_query_keys.length;x++){
+            const key = bilibili_query_keys[x];
+            if(key !== undefined) {
+                const value = bilibili_query[key];
+                if(value !== undefined){
+                    query_string += key + "=" + String(value) + "&";
+                }
+            }
+        }
+        query_string = query_string.slice(0,-1);
+        if(this.autoplay_flag){
+            if(!(window as any).mep_bilibili.mep_extension_bilibili){//時間カウント用プログラムの追加
+                this.no_extention_estimate_stop = true;
+                this.#set_pause_transparent();
+                this.player.addEventListener("load",()=>{this.play_start_time = new Date().getTime();this.no_extention_estimate_stop = false;this.play_start_count_interval = setInterval(this.#observe_load_time.bind(this),500);this.player.dispatchEvent(new Event("onReady"))},{once:true});
+            }
+            else{
+                this.player.addEventListener("onReady",()=>{if(this.fastload&&this.startSeconds!=0){this.seekTo(this.startSeconds)};if(this.fastload&&this.autoplay_flag){this.playVideo()}})
+            }
+        }
+        if(this.autoplay_flag||(window as any).mep_bilibili.mep_extension_bilibili===true){
+            bilibili_doc.src = (window as any).mep_bilibili.player_base_url + query_string;
+        }
+        else{
+            this.#image_player(true);
+        }
+        this.#add_player_css_style();
+        bilibili_doc.classList.add("mep_bilibili_player");
+        bilibili_doc.width = String(content.width);
+        bilibili_doc.height = String(content.height);
+        bilibili_doc.allow = "autoplay";//fix bug not autoplay on chrome
+        bilibili_doc.allowFullscreen = true;//fix bug can't watch on full screen(all browser)
+        bilibili_doc.style.border = "none";//fix bug display border on outer frame
+        try{(bilibili_doc.parentElement as any).setEvent()}catch{}
+        //bilibili_doc.sandbox = "allow-scripts";
+        this.endSeconds = -1;
+        if(content?.playerVars?.endSeconds!=undefined){
+            this.endSeconds = content?.playerVars?.endSeconds;
+        }
+        if(this.endSeconds!=-1){
+            this.end_point_observe = setInterval(this.#observe_end_time.bind(this),500);
+        }
+    }
+    /**
+     * Checks whether cross domain iframe can use local storage.
+     * If it can't, it will not load bilibili embed.
+     * @returns {Promise<void>}
+     */
+    async #checkLocalstorage(){
+        //check whether cross domain iframe can use local storage
+        //if can't ,it will not load bilibili embed
+        if((window as any).mep_bilibili.localStorageCheck==null){
+            let selected_localStorageCheck_url = "";
+            if(!location.origin.includes("pages.dev")){
+                selected_localStorageCheck_url = "https://multi-embed-player.pages.dev/localStorageCheck";
+            }
+            else{
+                selected_localStorageCheck_url = "https://multi-embed-player.netlify.app/localstoragecheck";
+            }
+            const cdls = document.createElement("iframe");
+            cdls.width = "0";
+            cdls.height = "0";
+            cdls.src = selected_localStorageCheck_url;//if you don't prefer you can change this file.But you must change origin.If you this embed example.com,you must not this otherdomain.example.com
+            //and if extention exists,it will redirect to send information about exist browser extention
+            cdls.style.cssText = "border:none;"
+            const origin = new URL(selected_localStorageCheck_url).origin;
+            document.body.appendChild(cdls);
+            const return_localstorage_status = await new Promise<boolean>(function(resolve: (value: boolean) => void, reject: (reason?: any) => void){
+                window.addEventListener("message",function(ms){
+                    if(ms.origin==origin){
+                        try{
+                            if(ms.data.extention){
+                                (window as any).mep_bilibili.mep_extension_bilibili = true;
+                            }
+                        }
+                        catch{}
+                        resolve(ms.data.localStorageUsable);
+                    }
+                })
+            }.bind(origin));
+            cdls.remove();
+            if(!return_localstorage_status){
+                (window as any).mep_bilibili.localStorageCheck = false;
+                this.front_error_code = 2;
+                this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:1200}}));//can't play bilibili video
+            }
+            else{
+                (window as any).mep_bilibili.localStorageCheck = true;
+            }
+        }
+        else if((window as any).mep_bilibili.localStorageCheck==false){
+            this.front_error_code = 2;
+            this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:1200}}));//can't play bilibili video
+            console.log("error")
+        }
+    }
+    /**
+     * Observes the load time of the video player and estimates the current time of the video.
+     * @private
+     */
+    async #observe_load_time(){
+        if(this.noextention_count_stop==0||this.noextention_count_stop==1){
+            let now_time = new Date().getTime();
+            if(!this.no_extention_estimate_stop){
+                if(this.innerStartSeconds!=undefined&&this.innerStartSeconds!=0){
+                    this.estimate_time = (now_time - this.play_start_time)/1000 + this.innerStartSeconds - (window as any).mep_bilibili.currentTime_delay;
+                }
+                else if(this.seek_time!=undefined&&this.seek_time!=0){
+                    this.estimate_time = (now_time - this.play_start_time)/1000 + this.seek_time - (window as any).mep_bilibili.currentTime_delay;
+                }
+                else{
+                    this.estimate_time = (now_time - this.play_start_time)/1000 + this.startSeconds - (window as any).mep_bilibili.currentTime_delay;
+                }
+            }
+            if(this.endSeconds!=-1&&this.estimate_time!==undefined&&this.estimate_time>this.endSeconds){
+                this.custom_state = 4;
+                this.player.dispatchEvent(new Event("onEndVideo"));//再生を終了したことにする
+                clearInterval(this.play_start_count_interval);//確認を消去
+                this.pauseVideo();
+            }
+            if(this.endSeconds===-1&&this.estimate_time!==undefined&&this.estimate_time>=(await this.getDuration())){
+                this.player.dispatchEvent(new Event("onEndVideo"));//再生を終了したことにする
+                clearInterval(this.play_start_count_interval);//確認を消去
+                this.pauseVideo();
+            }
+            if(this.noextention_count_stop==1){
+                this.noextention_count_stop = 2;
+            }
+        }
+
+    }
+    /**
+     * Observes the end time of the video player and dispatches the onEndVideo event.
+     * @private
+     */
+    #observe_end_time(){
+        let current_time = this.getCurrentTime();
+        if(this.endSeconds!=-1&&this.endSeconds<=current_time){//時間が来た
+            this.custom_state = 4;
+            clearInterval(this.end_point_observe);
+            this.pauseVideo();
+            this.player.dispatchEvent(new Event("onEndVideo"));
+        }
+        else if(this.endSeconds==-1){
+            clearInterval(this.end_point_observe);
+        }
+    }
+    /**
+     * Loads the video player with the specified content in cue mode.
+     * @param {Object} content - The content to display in the player.
+     */
+    cueVideoById(content: Partial<mep_bilibili_content>): void {
+        if(content["overwrite"]==undefined){
+            content["overwrite"] = true;
+        }
+        if(content["startSeconds"]!=undefined&&content["overwrite"]==true){
+            this.startSeconds = content["startSeconds"];
+        }
+        if(typeof content.startSeconds !== "undefined"){
+            this.innerStartSeconds = parseInt(content.startSeconds.toString());
+        }
+        else{
+            this.innerStartSeconds = 0;
+        }
+        if(content["endSeconds"]!=undefined&&content["overwrite"]==true){
+            this.endSeconds = content["endSeconds"];
+        }
+        this.autoplay_flag = false;
+        this.no_extention_pause = true;
+        if(content["overwrite"]==true){
+            this.videoid = content["videoId"] || "";
+        }
+        this.#image_player();
+    }
+    /**
+     * Loads the video player with the specified content in play mode.
+     * @param {Object} content - The content to display in the player.
+     */
+    loadVideoById(content: Partial<mep_bilibili_content>): void {
+        if(content["overwrite"]==undefined){
+            content["overwrite"] = true;
+        }
+        if(content["startSeconds"]!=undefined&&content["overwrite"]==true){
+            this.startSeconds = content["startSeconds"];
+        }
+        if(typeof content.startSeconds !== "undefined"){
+            this.innerStartSeconds = parseInt(content.startSeconds.toString());
+        }
+        else{
+            this.innerStartSeconds = 0;
+        }
+        if(content["endSeconds"]!=undefined&&content["overwrite"]==true){
+            this.endSeconds = content["endSeconds"];
+        }
+        this.autoplay_flag = true;
+        this.no_extention_pause = false;
+        this.#video_loader(content);
+    }
+    /**
+     * Asynchronously loads a Bilibili video player with the given content.
+     * @param {Object} content - The content of the video player to be loaded.
+     * @returns {Promise<void>} - A Promise that resolves when the video player is loaded.
+     * @private
+     */
+    async #video_loader(content: Partial<mep_bilibili_content>): Promise<void> {
+        if(this.player===undefined){
+            this.player = this.original_replacing_element;
+        }
+        this.loading = true;
+        this.#add_loading_animation();
+        if((window as any).mep_bilibili.localStorageCheck===false){
+            this.#add_local_storage_error_description();
+            return;
+        }
+        this.player.parentElement?.childNodes.forEach((node)=>{if((node as Element).tagName==="IMG"){(node as Element).remove()}});
+        let bilibili_query: BilibiliQuery = {
+            bvid: "",
+            autoplay: 0,
+            danmaku: 0
+        };
+        if(this.videoid!=content?.videoId){//when load other video
+            this.seek_time = -1;
+            this.seek_time_used = true;
+            this.estimate_time = undefined;
+            this.noextention_count_stop = 0;
+        }
+        this.videoid = content?.videoId || "";
+        if(((await this.#getVideodataApi()) as any)?.code!=0){//video can play or not if code not 0 such as 69002 the video maybe delete.
+            this.front_error_code = 3;
+            this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:404}}));
+            return;
+        }
+        bilibili_query.bvid = content?.videoId || "";
+        if(content?.startSeconds && content.startSeconds>0){
+            bilibili_query.t = content.startSeconds;
+        }
+        if(this.autoplay_flag){
+            bilibili_query.autoplay = 1;
+        }
+        else{
+            bilibili_query.autoplay = 0;
+        }
+        if(content?.displayComment!=undefined){
+            if(content?.displayComment==0){
+                this.displayCommentMode = false;
+            }
+            else if(content?.displayComment==1){
+                this.displayCommentMode = true;
+            }
+            else{
+                this.displayCommentMode = false;
+            }
+        }
+        if(this.displayCommentMode){
+            bilibili_query.danmaku = 1;
+        }
+        else{
+            bilibili_query.danmaku = 0;
+        }
+        let query_string = "";
+        let bilibili_query_keys = Object.keys(bilibili_query) as (keyof BilibiliQuery)[];
+        for(let x=0;x<bilibili_query_keys.length;x++){
+            const key = bilibili_query_keys[x];
+            if(key !== undefined) {
+                const value = bilibili_query[key];
+                if(value !== undefined){
+                    query_string += key + "=" + String(value) + "&";
+                }
+            }
+        }
+        query_string = query_string.slice(0,-1);
+        const new_player = document.createElement("iframe");
+        this.player.replaceWith(new_player);
+        this.player = new_player;
+        if(typeof this.player_set_event == "function"){
+            this.player_set_event(this.player as HTMLIFrameElement);
+        }
+        else{
+            try{
+                (this.player.parentElement as any).setEvent();
+            }
+            catch{}
+        }
+        this.player.addEventListener("onReady",()=>{this.#remove_loading_animation();this.loading = false},{once:true});
+        this.player.addEventListener("onError",()=>{this.#remove_loading_animation();this.#add_error_description()},{once:true});
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){//時間カウント用プログラムの追加
+            this.no_extention_estimate_stop = true;
+            if(this.autoplay_flag){
+                this.#set_pause_transparent();
+            }
+            else{
+                this.#image_player(true);
+            }
+            new_player.addEventListener("load",()=>{this.play_start_time = new Date().getTime();this.no_extention_estimate_stop = false;this.play_start_count_interval = setInterval(this.#observe_load_time.bind(this),500);this.player.dispatchEvent(new Event("onReady"))},{once:true});
+        }
+        (this.player as HTMLIFrameElement).src = (window as any).mep_bilibili.player_base_url + query_string;
+        (this.player as HTMLIFrameElement).allow = "autoplay";//fix bug not autoplay on chrome
+        (this.player as HTMLIFrameElement).allowFullscreen = true;//fix bug can't watch on full screen(all browser)
+        this.player.style.border = "none";//fix bug display border on outer frame
+        (this.player as HTMLIFrameElement).width = String(this.content_width);
+        (this.player as HTMLIFrameElement).height = String(this.content_height);
+        this.#add_player_css_style();
+        this.player.classList.add("mep_bilibili_player");
+        this.player.hidden = false;
+        //this.player.sandbox = "allow-scripts";
+        if(this.endSeconds!=-1){
+            this.end_point_observe = setInterval(this.#observe_end_time.bind(this),500);
+        }
+    }
+    /**
+     * Returns the current time of the video.
+     * @returns {Promise<number>} - The current time of the video.
+     */
+    getCurrentTime(): number {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            if(this.loading){
+                return this.startSeconds;
+            }
+            else if(!this.seek_time_used){
+                return this.seek_time;
+            }
+            else if(this.estimate_time!=undefined){
+                return this.estimate_time;
+            }
+            else{
+                return this.startSeconds;
+            }
+        }
+        else{
+            return this.state.currentTime || 0;
+        }
+    }
+    /**
+     * Plays the video. If the Bilibili extension is not installed, loads the video with the specified parameters.
+     * If the extension is installed, sends a message to the extension to play the video.
+     */
+    playVideo(): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            this.#set_pause_transparent();
+            this.no_extention_pause = false;
+            this.noextention_count_stop = 0;
+            let generate_sorce: Partial<mep_bilibili_content> = {"videoId":this.videoid,"overwrite":false};
+            if(this.endSeconds!=-1){
+                generate_sorce.endSeconds = this.endSeconds;
+            }
+            if(this.seek_time!=-1&&!this.seek_time_used){
+                this.seek_time_used = true;
+                generate_sorce.startSeconds = this.seek_time;
+            }
+            else if(this.estimate_time!=0){
+                generate_sorce.startSeconds = this.estimate_time;
+            }
+            else if(this.startSeconds!=0){
+                generate_sorce.startSeconds = this.startSeconds;
+            }
+            this.loadVideoById(generate_sorce);
+        }
+        else{
+            (this.player as HTMLIFrameElement).contentWindow?.postMessage({eventName:"play"},"*");
+        }
+    }
+    /**
+     * Pauses the video playback. If the Bilibili extension is not detected, it replaces the player with an image and stops the play start count interval.
+     * @function
+     */
+    pauseVideo(): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            clearInterval(this.play_start_count_interval);
+            this.no_extention_pause = true;
+            this.noextention_count_stop = 1;
+            this.#image_player();
+            this.seek_time = this.estimate_time || 0;
+            try{(this.player.parentElement as any).deleteEvent()}catch{}
+        }
+        else{
+            (this.player as HTMLIFrameElement).contentWindow?.postMessage({eventName:"pause"},"*");
+        }
+    }
+    /**
+     * Seeks to the specified time in the video.
+     * @async
+     * @param {number} seektime - The time to seek to, in seconds.
+     */
+    async seekTo(seektime: number): Promise<void> {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            let generate_sorce: Partial<mep_bilibili_content> = {"videoId":this.videoid,"overwrite":false};
+            if(this.endSeconds!=-1){
+                generate_sorce.endSeconds = this.endSeconds;
+            }
+            generate_sorce.startSeconds = seektime;
+            this.seek_time = seektime;
+            this.seek_time_used = false;
+            let player_state = await this.getPlayerState();
+            if(player_state==2){
+                this.seek_time_used = true;
+                this.loadVideoById(generate_sorce);
+            }
+            else{
+                this.estimate_time = seektime;
+                this.cueVideoById(generate_sorce);
+            }
+        }
+        else{
+            (this.player as HTMLIFrameElement).contentWindow?.postMessage({eventName:"seek",seekTime:Number(seektime)},"*");
+        }
+    }
+    /**
+     * Calculates the real duration of the video based on the start and end seconds.
+     * @async
+     * @function
+     * @returns {Promise<number>} The real duration of the video.
+     */
+    async getRealDulation(): Promise<number> {//original function
+        if(this.endSeconds==-1){
+            return await this.getDuration() - this.startSeconds;
+        }
+        else{
+            return this.endSeconds - this.startSeconds;
+        }
+    }
+    /**
+     * Asynchronously retrieves video data API for Bilibili.
+     * @returns {Promise<Object>} Promise object representing the video data API for Bilibili.
+     */
+    async #getVideodataApi(): Promise<BilibiliApiResponse> {
+        return new Promise(async(resolve,reject)=>{
+            let multi_embed_player_class_usable = false;
+            try{
+                if(typeof multi_embed_player !== 'undefined' && multi_embed_player.cors_proxy){};
+                multi_embed_player_class_usable = true;
+            }
+            catch{
+                multi_embed_player_class_usable = false;
+            }
+            let url = "";
+            if(multi_embed_player_class_usable){
+                url = (typeof multi_embed_player !== 'undefined') ? multi_embed_player.cors_proxy : '';
+            }
+            else{
+                url = (window as any).mep_bilibili.cors_proxy;
+            }
+            if(multi_embed_player_class_usable){
+                if(typeof multi_embed_player !== 'undefined' && !(this.videoid in multi_embed_player.api_cache.bilibili)){
+                    if(typeof multi_embed_player_fetch_iframe_api !== 'undefined'){
+                        await multi_embed_player_fetch_iframe_api("bilibili",this.videoid,multi_embed_player.cors_proxy!=="",true,false,true,this.player);
+                    }
+                }
+                if(typeof multi_embed_player !== 'undefined'){
+                    resolve(multi_embed_player.api_cache.bilibili[this.videoid]);
+                } else {
+                    reject('multi_embed_player not available');
+                }
+            }
+            else{
+                if(!(this.videoid in (window as any).mep_bilibili.bilibili_api_cache)){
+                    if((window as any).mep_bilibili.bilibili_api_promise[this.videoid]==undefined){
+                        (window as any).mep_bilibili.bilibili_api_promise[this.videoid] = {res:[],rej:[]};
+                        try{
+                            if((window as any).mep_bilibili.cors_proxy===""){
+                                (window as any).mep_bilibili.bilibili_api_cache[this.videoid] = await(await fetch(`${(window as any).mep_bilibili.api_endpoint}?route=bilibili&videoid=${this.videoid}&image_base64=1`)).json();
+                            }
+                            else{
+                                let json_response_bilibili = await(await fetch(url + `https://api.bilibili.com/x/web-interface/view?bvid=${this.videoid}`)).json();
+                                if(json_response_bilibili?.data?.pic===undefined){
+                                    json_response_bilibili["image_base64"] = null;
+                                }
+                                else{
+                                    json_response_bilibili["image_base64"] = url + json_response_bilibili.data.pic;
+                                }
+                                (window as any).mep_bilibili.bilibili_api_cache[this.videoid] = json_response_bilibili;
+                            }
+                        }
+                        catch{
+                            console.error("error occured when get bilibili api. Are you sure you overwrite iframe_api endpoint? or cors proxy is not working?");
+                            this.front_error_code = 1;
+                            this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:1100}}));
+                        }
+                        (window as any).mep_bilibili.bilibili_api_promise[this.videoid].res.forEach((resolve: (value: BilibiliApiResponse) => void)=>{resolve((window as any).mep_bilibili.bilibili_api_cache[this.videoid])});
+                        resolve((window as any).mep_bilibili.bilibili_api_cache[this.videoid]);
+                    }
+                    else{
+                        (window as any).mep_bilibili.bilibili_api_promise[this.videoid].res.push(resolve);
+                        (window as any).mep_bilibili.bilibili_api_promise[this.videoid].rej.push(reject);
+                        return;
+                    }
+                }
+                else{
+                    resolve((window as any).mep_bilibili.bilibili_api_cache[this.videoid]);
+                }
+            }
+        });
+    }
+
+    /**
+     * Get the duration of the video.
+     * @async
+     * @returns {Promise<number>} The duration of the video in seconds.
+     */
+    async getDuration(): Promise<number> {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            let videodata_api = await this.#getVideodataApi();
+            return videodata_api["data"]?.["duration"] || 0;
+        }
+        else{
+            return this.state.dulation || 0
+        }
+    }
+
+    /**
+     * Gets the title of the video.
+     * @returns {Promise<string>} The title of the video.
+     */
+    async getTitle(): Promise<string> {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            let videodata_api = await this.#getVideodataApi();
+            return videodata_api["data"]?.["title"] || "";
+        }
+        else{
+            return this.state.getTitle || ""
+        }
+    }
+    /**
+     * Returns the current state of the player.
+     * @async
+     * @returns {number} The state of the player. Possible values are:
+     * 0 - Player is not ready or cache is not available.
+     * 1 - Player is ready and not playing.
+     * 2 - Player is playing.
+     * 3 - Player is paused.
+     * 4 - Player was ended.
+     */
+    async getPlayerState(): Promise<number> {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            const realDulationCache = await this.getRealDulation();
+            const currentTimeCahce = await this.getCurrentTime();
+            if(this.loading||currentTimeCahce==undefined||realDulationCache==undefined||Number.isNaN(realDulationCache)){
+                return 0//1のほうが適切かもしれない
+            }
+            else if(this.innerStartSeconds==currentTimeCahce){
+                return 1
+            }
+            else if(((currentTimeCahce - this.startSeconds)/realDulationCache)>0.99){
+                return 4
+            }
+            else if(this.no_extention_pause){
+                return 3
+            }
+            else if(((currentTimeCahce - this.startSeconds)/realDulationCache)<0.99){//再生中の可能性大
+                return 2
+            }
+            else{
+                return -2
+            }
+        }
+        else{
+            if(this.state.getPlayerState!=undefined){
+                if(this.state.getPlayerState=="READY"){
+                    return 1
+                }
+                else if(this.state.getPlayerState=="PLAYING"){
+                    return 2
+                }
+                else if(this.state.getPlayerState=="PAUSED"){
+                    let current_duration = ((this.getCurrentTime()) / ((await this.getDuration()) - this.endSeconds))*100//%で出す
+                    if(current_duration>99){
+                        return 4
+                    }
+                    else{
+                        return 3
+                    }
+                }
+            }
+            return 0; // Default return value
+        }
+    }
+    /**
+     * Sets the volume of the Bilibili player.
+     * When not install extention, this function will not work.
+     * @param {number} volume - The volume level to set, between 0 and 100.
+     */
+    setVolume(volume: number): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+        }
+        else{
+            (this.player as HTMLIFrameElement).contentWindow?.postMessage({eventName:"setVolume",volume:Number(volume/100)},"*");//100で割って差をなくす
+        }
+    }
+    /**
+     * Gets the current volume of the Bilibili player.
+     * When not install extention, this function will not work.
+     * @returns {number} The current volume value.
+     */
+    getVolume(): number | undefined {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+            return undefined;
+        }
+        else{
+            return this.state.volumeValue
+        }
+    }
+    /**
+     * Checks if the player is currently muted.
+     * When not install extention, this function will not work.
+     * @returns {boolean} True if the player is muted, false otherwise.
+     */
+    isMuted(): boolean | undefined {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+            return undefined;
+        }
+        else{
+            if(this.getVolume()!=0){
+                return false
+            }
+            else{
+                return true
+            }
+        }
+    }
+    /**
+     * Mutes the player by setting the volume to 0.
+     * When not install extention, this function will not work.
+     * @function
+     * @returns {void}
+     */
+    mute(): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+        }
+        else{
+            this.before_mute_volume = this.getVolume() || 0;
+            this.setVolume(0);
+        }
+    }
+    /**
+     * Unmutes the player by setting the volume to the previous volume.
+     * When not install extention, this function will not work.
+     * @function
+     * @returns {void}
+     */
+    unMute(): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+        }
+        else{
+            this.setVolume(this.before_mute_volume);
+        }
+    }
+    /**
+     * Sends a message to the player's content window to display or hide comments.
+     * When not install extention, this function will not work.
+     * @param {string} mode - The visibility mode of the comments. Possible values are "visible" or "hidden".
+     * @returns {void}
+     */
+    displayComment(mode: string): void {
+        if(!(window as any).mep_bilibili.mep_extension_bilibili){
+            console.warn((window as any).mep_bilibili.no_extention_error);
+        }
+        else{
+            (this.player as HTMLIFrameElement).contentWindow?.postMessage({eventName:"displayComment",commentVisibility:mode},"*");
+        }
+    }
+    /**
+     * Listens to messages from the iframe and updates the player state accordingly.
+     * @private
+     * This function only run multi embed player extension installed.
+     */
+    #messageListener(): void {
+        this.start_event_count = 0;
+        this.end_event_count = 0;
+        window.addEventListener("message",(data)=>{
+            if(data.data.type=="data_change"){
+                this.state = Object.assign(this.state,data.data);
+                if(this.start_event_count==0&&data.data.dulation>0){
+                    this.start_event_count = 1;
+                    this.player.dispatchEvent(new Event("onReady"));
+                }
+                if(this.end_event_count==0&&data.data.dulation>data.data.currentTime-1&&data.data.getPlayerState=="PAUSED"){
+                    this.player.dispatchEvent(new Event("onEndVideo"));
+                    this.end_event_count = 1;
+                }
+            }
+            else if(data.data.type=="error"){
+                this.front_error_code = 4;
+                this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:500}}));
+            }
+        })
+    }
+}
+// after loading a class, call the function to set the variable before use this class.
+if(typeof multi_embed_player_set_variable !== 'undefined' && typeof multi_embed_player_set_variable === "function"){
+    multi_embed_player_set_variable(mep_bilibili);
+}
+(window as any).mep_bilibili = mep_bilibili;