multi_embed_player 3.0.1 → 3.1.1

package/dist/iframe_api/bilibili.js

@@ -1,451 +1,1035 @@
-import { PlayerState } from '../types';
+"use strict";
+// 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
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _mep_bilibili_instances, _mep_bilibili_image_player, _mep_bilibili_set_pause_transparent, _mep_bilibili_add_loading_animation, _mep_bilibili_remove_loading_animation, _mep_bilibili_add_error_description, _mep_bilibili_add_player_css_style, _mep_bilibili_add_local_storage_error_description, _mep_bilibili_element_constructor, _mep_bilibili_checkLocalstorage, _mep_bilibili_observe_load_time, _mep_bilibili_observe_end_time, _mep_bilibili_video_loader, _mep_bilibili_getVideodataApi, _mep_bilibili_messageListener;
 /**
  * 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.
  */
-export class mep_bilibili {
+class mep_bilibili {
     constructor(replacing_element, content, player_set_event_function) {
-        this.autoplay = 0;
+        _mep_bilibili_instances.add(this);
+        this.player = document.createElement("iframe");
+        this.play_control_wrap = false;
+        this.loading = false;
+        this.before_mute_volume = 100;
+        this.content_width = 0;
+        this.content_height = 0;
+        this.videoid = "";
+        this.original_replacing_element = document.createElement("div");
+        this.seek_time = 0;
+        this.seek_time_used = false;
+        this.noextention_count_stop = 0;
+        this.state = { getPlayerState: "0" };
+        this.apicache = {};
+        this.no_extention_pause = false;
         this.startSeconds = 0;
+        this.innerStartSeconds = 0;
+        this.autoplay_flag = false;
+        this.displayCommentMode = false;
+        this.fastload = false;
+        this.no_extention_estimate_stop = false;
+        this.play_start_time = 0;
         this.endSeconds = -1;
-        this.displayComment = 1;
-        this.fastLoad = 0;
-        this.play_control_wrap = 1;
-        this.playerState = PlayerState.UNSTARTED;
-        this.currentTime = 0;
-        this.duration = 0;
-        this.volume = 100;
-        this.muted = false;
-        this.initialize_player_base_url();
-        this.element_constructor(replacing_element, content, player_set_event_function);
-    }
-    /**
-     * Initialize player base URL based on browser.
-     */
-    initialize_player_base_url() {
-        if (mep_bilibili.player_base_url === "") {
+        this.start_event_count = 0;
+        this.end_event_count = 0;
+        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?";
+            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?";
+                mep_bilibili.player_base_url = "https://player.bilibili.com/player.html?"; //load often lazy in japan but this can mute auto play
             }
         }
+        (async () => {
+            await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_element_constructor).call(this, replacing_element, content, player_set_event_function);
+        })();
     }
     /**
-     * Constructor for element setup.
+     * Loads the video player with the specified content in cue mode.
+     * @param {Object} content - The content to display in the player.
      */
-    async element_constructor(replacing_element, content, player_set_event_function) {
-        try {
-            this.player = document.createElement("iframe");
-            if (typeof player_set_event_function === "function") {
-                player_set_event_function();
-            }
-            let iframe_replace_node;
-            if (typeof replacing_element === "string") {
-                const element = document.getElementById(replacing_element);
-                if (!element) {
-                    throw new Error(`Element with id "${replacing_element}" not found`);
-                }
-                iframe_replace_node = element;
+    cueVideoById(content) {
+        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"] || "";
+        }
+        __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_image_player).call(this);
+    }
+    /**
+     * Loads the video player with the specified content in play mode.
+     * @param {Object} content - The content to display in the player.
+     */
+    loadVideoById(content) {
+        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;
+        __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_video_loader).call(this, content);
+    }
+    /**
+     * Returns the current time of the video.
+     * @returns {Promise<number>} - The current time of the video.
+     */
+    getCurrentTime() {
+        if (!window.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 {
-                iframe_replace_node = replacing_element;
-            }
-            this.videoid = content.videoId;
-            const playerVars = content.playerVars || {};
-            // Set player variables
-            this.autoplay = playerVars.autoplay || 0;
-            this.startSeconds = playerVars.startSeconds || 0;
-            this.endSeconds = playerVars.endSeconds || -1;
-            this.displayComment = playerVars.displayComment !== undefined ? playerVars.displayComment : 1;
-            this.fastLoad = playerVars.fastLoad || 0;
-            this.play_control_wrap = playerVars.play_control_wrap !== undefined ? playerVars.play_control_wrap : 1;
-            // Check local storage access
-            if (mep_bilibili.localStorageCheck === null) {
-                try {
-                    localStorage.setItem("mep_bilibili_test", "test");
-                    localStorage.removeItem("mep_bilibili_test");
-                    mep_bilibili.localStorageCheck = true;
-                }
-                catch {
-                    mep_bilibili.localStorageCheck = false;
-                    this.front_error_code = 2;
-                    this.add_error_description();
-                    return;
-                }
+                return this.startSeconds;
             }
-            // Check extension
-            mep_bilibili.mep_extension_bilibili = localStorage.getItem("mep_extension_bilibili") === "true";
-            this.add_player_css_style();
-            this.player.classList.add("mep_bilibili_player");
-            // Set iframe attributes
-            this.player.width = String(content.width || 560);
-            this.player.height = String(content.height || 315);
-            this.player.allow = "autoplay; fullscreen";
-            this.player.allowFullscreen = true;
-            this.player.referrerPolicy = "no-referrer";
-            // Replace element
-            iframe_replace_node.replaceWith(this.player);
-            // Load video
-            await this.image_player(true);
-        }
-        catch (error) {
-            console.error("Error in element_constructor:", error);
-            this.front_error_code = 0;
-            this.add_error_description();
+        }
+        else {
+            return this.state.currentTime || 0;
         }
     }
     /**
-     * Display image player when paused.
+     * 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.
      */
-    async image_player(first_load = false) {
-        try {
-            let exist_img_children = false;
-            const parent_element = this.player.parentElement;
-            if (!parent_element)
-                return;
-            parent_element.childNodes.forEach((node) => {
-                if (node.nodeName === "IMG") {
-                    exist_img_children = true;
-                }
-                if (node.nodeName === "DIV" && node.classList.contains("mep_bilibili_transparent")) {
-                    node.remove();
-                }
-            });
-            if (!exist_img_children && this.play_control_wrap) {
-                const img_element = document.createElement("img");
-                const video_data = await this.getVideodataApi();
-                img_element.src = video_data.image_base64 || "";
-                img_element.width = parseInt(this.player.width);
-                img_element.height = parseInt(this.player.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();
-                });
-                parent_element.prepend(img_element);
-            }
-            this.player.hidden = true;
-            this.player.src = "";
-            if (first_load) {
-                this.player.dispatchEvent(new Event("onReady"));
+    playVideo() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_set_pause_transparent).call(this);
+            this.no_extention_pause = false;
+            this.noextention_count_stop = 0;
+            let generate_sorce = { "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);
         }
-        catch (error) {
-            console.error("Error in image_player:", error);
+        else {
+            this.player.contentWindow?.postMessage({ eventName: "play" }, "*");
         }
     }
     /**
-     * Set pause transparent overlay.
+     * 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
      */
-    set_pause_transparent() {
-        let exist_div_children = false;
-        const parent_element = this.player.parentElement;
-        if (!parent_element)
-            return;
-        parent_element.childNodes.forEach((node) => {
-            if (node.nodeName === "DIV" && node.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();
-            });
-            parent_element.prepend(div_element);
+    pauseVideo() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            clearInterval(this.play_start_count_interval);
+            this.no_extention_pause = true;
+            this.noextention_count_stop = 1;
+            __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_image_player).call(this);
+            this.seek_time = this.estimate_time || 0;
+            try {
+                this.player.parentElement.deleteEvent();
+            }
+            catch { }
+        }
+        else {
+            this.player.contentWindow?.postMessage({ eventName: "pause" }, "*");
         }
     }
     /**
-     * Add loading animation.
+     * Seeks to the specified time in the video.
+     * @async
+     * @param {number} seektime - The time to seek to, in seconds.
      */
-    add_loading_animation() {
-        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;
-        const parent_element = this.player.parentElement;
-        if (!parent_element)
-            return;
-        parent_element.childNodes.forEach((node) => {
-            if (node.nodeName === "DIV" && node.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";
-            parent_element.prepend(div_element);
+    async seekTo(seektime) {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            let generate_sorce = { "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.contentWindow?.postMessage({ eventName: "seek", seekTime: Number(seektime) }, "*");
         }
     }
     /**
-     * Remove loading animation.
+     * 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.
      */
-    remove_loading_animation() {
-        const parent_element = this.player.parentElement;
-        if (!parent_element)
-            return;
-        parent_element.childNodes.forEach((node) => {
-            if (node.nodeName === "DIV" && node.classList.contains("mep_loading_animation")) {
-                node.remove();
-            }
-        });
+    async getRealDulation() {
+        if (this.endSeconds == -1) {
+            return await this.getDuration() - this.startSeconds;
+        }
+        else {
+            return this.endSeconds - this.startSeconds;
+        }
     }
     /**
-     * Add error description.
+     * Get the duration of the video.
+     * @async
+     * @returns {Promise<number>} The duration of the video in seconds.
      */
-    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 && mep_bilibili.error_description[this.front_error_code] !== undefined) {
-            error_message = 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 {
-            const parent_element = this.player.parentElement;
-            if (parent_element) {
-                parent_element.style.backgroundImage = "";
-            }
+    async getDuration() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            let videodata_api = await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_getVideodataApi).call(this);
+            return videodata_api["data"]?.["duration"] || 0;
+        }
+        else {
+            return this.state.dulation || 0;
         }
-        catch { }
     }
     /**
-     * Add player CSS style.
+     * Gets the title of the video.
+     * @returns {Promise<string>} The title of the video.
      */
-    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);
+    async getTitle() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            let videodata_api = await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_getVideodataApi).call(this);
+            return videodata_api["data"]?.["title"] || "";
+        }
+        else {
+            return this.state.getTitle || "";
         }
     }
     /**
-     * Get video data from API.
+     * 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 getVideodataApi() {
-        return new Promise(async (resolve, reject) => {
-            if (!(this.videoid in mep_bilibili.bilibili_api_cache)) {
-                if (mep_bilibili.bilibili_api_promise[this.videoid] === undefined) {
-                    mep_bilibili.bilibili_api_promise[this.videoid] = { res: [], rej: [] };
-                    try {
-                        if (mep_bilibili.cors_proxy === "") {
-                            mep_bilibili.bilibili_api_cache[this.videoid] = await (await fetch(`${mep_bilibili.api_endpoint}?route=bilibili&videoid=${this.videoid}&image_base64=1`)).json();
-                        }
-                        else {
-                            const json_response_bilibili = await (await fetch(mep_bilibili.cors_proxy + `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"] = mep_bilibili.cors_proxy + json_response_bilibili.data.pic;
-                            }
-                            mep_bilibili.bilibili_api_cache[this.videoid] = json_response_bilibili;
-                        }
+    async getPlayerState() {
+        if (!window.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;
                     }
-                    catch {
-                        console.error("error occurred 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 } }));
+                    else {
+                        return 3;
                     }
-                    mep_bilibili.bilibili_api_promise[this.videoid].res.forEach((resolveFunc) => { resolveFunc(); });
-                    resolve(mep_bilibili.bilibili_api_cache[this.videoid]);
-                }
-                else {
-                    mep_bilibili.bilibili_api_promise[this.videoid].res.push(() => resolve(mep_bilibili.bilibili_api_cache[this.videoid]));
-                    mep_bilibili.bilibili_api_promise[this.videoid].rej.push(() => reject());
-                    return;
                 }
             }
-            else {
-                resolve(mep_bilibili.bilibili_api_cache[this.videoid]);
-            }
-        });
+            return 0; // Default return value
+        }
     }
-    // IPlayer interface implementation
-    playVideo() {
-        if (!mep_bilibili.mep_extension_bilibili) {
-            this.set_pause_transparent();
-            // Implementation for non-extension mode
+    /**
+     * 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) {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
         }
         else {
-            this.player.contentWindow.postMessage({ eventName: "play" }, "*");
+            this.player.contentWindow?.postMessage({ eventName: "setVolume", volume: Number(volume / 100) }, "*"); //100で割って差をなくす
         }
     }
-    pauseVideo() {
-        if (!mep_bilibili.mep_extension_bilibili) {
-            this.image_player();
+    /**
+     * Gets the current volume of the Bilibili player.
+     * When not install extention, this function will not work.
+     * @returns {number} The current volume value.
+     */
+    getVolume() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
+            return undefined;
         }
         else {
-            this.player.contentWindow.postMessage({ eventName: "pause" }, "*");
+            return this.state.volumeValue;
         }
     }
-    getCurrentTime() {
-        return Promise.resolve(this.currentTime);
+    /**
+     * 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() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
+            return undefined;
+        }
+        else {
+            if (this.getVolume() != 0) {
+                return false;
+            }
+            else {
+                return true;
+            }
+        }
     }
-    getDuration() {
-        return Promise.resolve(this.duration);
+    /**
+     * Mutes the player by setting the volume to 0.
+     * When not install extention, this function will not work.
+     * @function
+     * @returns {void}
+     */
+    mute() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
+        }
+        else {
+            this.before_mute_volume = this.getVolume() || 0;
+            this.setVolume(0);
+        }
     }
-    async seekTo(time) {
-        const num_time = Number(time);
-        if (isNaN(num_time) || num_time < 0) {
-            console.error("Invalid time value");
-            return;
+    /**
+     * Unmutes the player by setting the volume to the previous volume.
+     * When not install extention, this function will not work.
+     * @function
+     * @returns {void}
+     */
+    unMute() {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
         }
-        if (!mep_bilibili.mep_extension_bilibili) {
-            // Implementation for non-extension mode
+        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) {
+        if (!window.mep_bilibili.mep_extension_bilibili) {
+            console.warn(window.mep_bilibili.no_extention_error);
         }
         else {
-            this.player.contentWindow.postMessage({ eventName: "seek", seekTime: num_time }, "*");
+            this.player.contentWindow?.postMessage({ eventName: "displayComment", commentVisibility: mode }, "*");
         }
     }
-    setVolume(volume) {
-        const num_volume = Number(volume);
-        if (isNaN(num_volume) || num_volume < 0 || num_volume > 100) {
-            console.error("Invalid volume value");
-            return;
+}
+_mep_bilibili_instances = new WeakSet(), _mep_bilibili_image_player = 
+/**
+ * @private
+ * This function is used for display when player is paused.
+ * When this img clicked the player will be played.
+ */
+async function _mep_bilibili_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.classList.contains("mep_bilibili_transparent")) {
+            node.remove();
+        } });
+        if (!exist_img_children && this.play_control_wrap) {
+            const img_element = document.createElement("img");
+            img_element.src = (await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_getVideodataApi).call(this))["image_base64"] || "";
+            img_element.width = Number(this.player.width);
+            img_element.height = Number(this.player.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.src = "";
+        if (first_load) {
+            this.player.dispatchEvent(new Event("onReady"));
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+}, _mep_bilibili_set_pause_transparent = function _mep_bilibili_set_pause_transparent() {
+    let exist_div_children = false;
+    this.player.parentElement?.childNodes.forEach((node) => { if (node.nodeName === "DIV" && node.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);
+    }
+}, _mep_bilibili_add_loading_animation = function _mep_bilibili_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.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);
+    }
+}, _mep_bilibili_remove_loading_animation = function _mep_bilibili_remove_loading_animation() {
+    this.player.parentElement?.childNodes.forEach((node) => { if (node.nodeName === "DIV" && node.classList.contains("mep_loading_animation")) {
+        node.remove();
+    } });
+}, _mep_bilibili_add_error_description = function _mep_bilibili_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.mep_bilibili.error_description[this.front_error_code] != undefined) {
+        error_message = window.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 { }
+}, _mep_bilibili_add_player_css_style = function _mep_bilibili_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);
+    }
+}, _mep_bilibili_add_local_storage_error_description = function _mep_bilibili_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 { }
+}, _mep_bilibili_element_constructor = 
+/**
+ * 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 function _mep_bilibili_element_constructor(replacing_element, content, player_set_event_function) {
+    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;
+    __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_loading_animation).call(this);
+    this.player.addEventListener("onReady", () => { __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_remove_loading_animation).call(this); this.loading = false; }, { once: true });
+    this.player.addEventListener("onError", () => { __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_remove_loading_animation).call(this); __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_error_description).call(this); }, { once: true });
+    if (typeof player_set_event_function == "function") {
+        player_set_event_function(this.player);
+        this.player_set_event = player_set_event_function;
+    }
+    const api_response = await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_getVideodataApi).call(this);
+    if (api_response?.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.mep_bilibili.localStorageCheck != true) {
+        await __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_checkLocalstorage).call(this);
+    }
+    if (window.mep_bilibili.localStorageCheck === false) {
+        __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_local_storage_error_description).call(this);
+        return;
+    }
+    this.no_extention_pause = false;
+    __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_messageListener).call(this);
+    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;
         }
-        if (!mep_bilibili.mep_extension_bilibili) {
-            console.warn(mep_bilibili.no_extention_error);
+        else if (content?.playerVars?.displayComment == 1) {
+            this.displayCommentMode = true;
         }
         else {
-            this.player.contentWindow.postMessage({ eventName: "setVolume", volume: num_volume / 100 }, "*");
+            this.displayCommentMode = false;
         }
     }
-    getVolume() {
-        if (!mep_bilibili.mep_extension_bilibili) {
-            console.warn(mep_bilibili.no_extention_error);
-            return Promise.resolve(this.volume);
+    let bilibili_query = {
+        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.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.mep_bilibili.mep_extension_bilibili) {
+            console.log("fast load ignored because of mep extention not installed in your browser");
         }
         else {
-            return Promise.resolve(this.volume);
+            if (content?.playerVars?.fastLoad == 1) {
+                this.fastload = true;
+            }
         }
     }
-    mute() {
-        if (!mep_bilibili.mep_extension_bilibili) {
-            console.warn(mep_bilibili.no_extention_error);
+    let query_string = "";
+    let bilibili_query_keys = Object.keys(bilibili_query);
+    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.mep_bilibili.mep_extension_bilibili) { //時間カウント用プログラムの追加
+            this.no_extention_estimate_stop = true;
+            __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_set_pause_transparent).call(this);
+            this.player.addEventListener("load", () => { this.play_start_time = new Date().getTime(); this.no_extention_estimate_stop = false; this.play_start_count_interval = setInterval(__classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_observe_load_time).bind(this), 500); this.player.dispatchEvent(new Event("onReady")); }, { once: true });
         }
         else {
-            this.volume = this.volume; // Store current volume
-            this.player.contentWindow.postMessage({ eventName: "setVolume", volume: 0 }, "*");
+            this.player.addEventListener("onReady", () => { if (this.fastload && this.startSeconds != 0) {
+                this.seekTo(this.startSeconds);
+            } ; if (this.fastload && this.autoplay_flag) {
+                this.playVideo();
+            } });
         }
     }
-    unMute() {
-        if (!mep_bilibili.mep_extension_bilibili) {
-            console.warn(mep_bilibili.no_extention_error);
+    if (this.autoplay_flag || window.mep_bilibili.mep_extension_bilibili === true) {
+        bilibili_doc.src = window.mep_bilibili.player_base_url + query_string;
+    }
+    else {
+        __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_image_player).call(this, true);
+    }
+    __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_player_css_style).call(this);
+    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.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(__classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_observe_end_time).bind(this), 500);
+    }
+}, _mep_bilibili_checkLocalstorage = 
+/**
+ * Checks whether cross domain iframe can use local storage.
+ * If it can't, it will not load bilibili embed.
+ * @returns {Promise<void>}
+ */
+async function _mep_bilibili_checkLocalstorage() {
+    //check whether cross domain iframe can use local storage
+    //if can't ,it will not load bilibili embed
+    if (window.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 {
-            this.player.contentWindow.postMessage({ eventName: "setVolume", volume: this.volume / 100 }, "*");
+            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(function (resolve, reject) {
+            window.addEventListener("message", function (ms) {
+                if (ms.origin == origin) {
+                    try {
+                        if (ms.data.extention) {
+                            window.mep_bilibili.mep_extension_bilibili = true;
+                        }
+                    }
+                    catch { }
+                    resolve(ms.data.localStorageUsable);
+                }
+            });
+        }.bind(origin));
+        cdls.remove();
+        if (!return_localstorage_status) {
+            window.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.mep_bilibili.localStorageCheck = true;
         }
     }
-    isMuted() {
-        return Promise.resolve(this.muted);
+    else if (window.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");
+    }
+}, _mep_bilibili_observe_load_time = 
+/**
+ * Observes the load time of the video player and estimates the current time of the video.
+ * @private
+ */
+async function _mep_bilibili_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.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.mep_bilibili.currentTime_delay;
+            }
+            else {
+                this.estimate_time = (now_time - this.play_start_time) / 1000 + this.startSeconds - window.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;
+        }
     }
-    getPlayerState() {
-        return Promise.resolve(this.playerState);
+}, _mep_bilibili_observe_end_time = function _mep_bilibili_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"));
     }
-    /**
-     * Get real duration between start and end times.
-     */
-    async getRealDulation() {
-        const duration = await this.getDuration();
-        if (this.endSeconds === -1) {
-            return duration - this.startSeconds;
+    else if (this.endSeconds == -1) {
+        clearInterval(this.end_point_observe);
+    }
+}, _mep_bilibili_video_loader = 
+/**
+ * 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 function _mep_bilibili_video_loader(content) {
+    if (this.player === undefined) {
+        this.player = this.original_replacing_element;
+    }
+    this.loading = true;
+    __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_loading_animation).call(this);
+    if (window.mep_bilibili.localStorageCheck === false) {
+        __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_local_storage_error_description).call(this);
+        return;
+    }
+    this.player.parentElement?.childNodes.forEach((node) => { if (node.tagName === "IMG") {
+        node.remove();
+    } });
+    let bilibili_query = {
+        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 __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_getVideodataApi).call(this))?.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 {
-            return this.endSeconds - this.startSeconds;
+            this.displayCommentMode = false;
         }
     }
-    /**
-     * Load video by ID.
-     */
-    loadVideoById(content) {
-        this.videoid = content.videoId;
-        const playerVars = content.playerVars || {};
-        this.autoplay = playerVars.autoplay || 0;
-        this.startSeconds = playerVars.startSeconds || 0;
-        this.endSeconds = playerVars.endSeconds || -1;
-        // Implementation for loading video
+    if (this.displayCommentMode) {
+        bilibili_query.danmaku = 1;
     }
-    /**
-     * Cue video by ID.
-     */
-    cueVideoById(content) {
-        this.videoid = content.videoId;
-        const playerVars = content.playerVars || {};
-        this.autoplay = 0; // Don't autoplay when cueing
-        this.startSeconds = playerVars.startSeconds || 0;
-        this.endSeconds = playerVars.endSeconds || -1;
-        // Implementation for cueing video
+    else {
+        bilibili_query.danmaku = 0;
     }
-}
-mep_bilibili.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"
+    let query_string = "";
+    let bilibili_query_keys = Object.keys(bilibili_query);
+    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);
+    }
+    else {
+        try {
+            this.player.parentElement.setEvent();
+        }
+        catch { }
+    }
+    this.player.addEventListener("onReady", () => { __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_remove_loading_animation).call(this); this.loading = false; }, { once: true });
+    this.player.addEventListener("onError", () => { __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_remove_loading_animation).call(this); __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_error_description).call(this); }, { once: true });
+    if (!window.mep_bilibili.mep_extension_bilibili) { //時間カウント用プログラムの追加
+        this.no_extention_estimate_stop = true;
+        if (this.autoplay_flag) {
+            __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_set_pause_transparent).call(this);
+        }
+        else {
+            __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_image_player).call(this, true);
+        }
+        new_player.addEventListener("load", () => { this.play_start_time = new Date().getTime(); this.no_extention_estimate_stop = false; this.play_start_count_interval = setInterval(__classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_observe_load_time).bind(this), 500); this.player.dispatchEvent(new Event("onReady")); }, { once: true });
+    }
+    this.player.src = window.mep_bilibili.player_base_url + query_string;
+    this.player.allow = "autoplay"; //fix bug not autoplay on chrome
+    this.player.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.width = String(this.content_width);
+    this.player.height = String(this.content_height);
+    __classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_add_player_css_style).call(this);
+    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(__classPrivateFieldGet(this, _mep_bilibili_instances, "m", _mep_bilibili_observe_end_time).bind(this), 500);
+    }
+}, _mep_bilibili_getVideodataApi = 
+/**
+ * Asynchronously retrieves video data API for Bilibili.
+ * @returns {Promise<Object>} Promise object representing the video data API for Bilibili.
+ */
+async function _mep_bilibili_getVideodataApi() {
+    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.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.mep_bilibili.bilibili_api_cache)) {
+                if (window.mep_bilibili.bilibili_api_promise[this.videoid] == undefined) {
+                    window.mep_bilibili.bilibili_api_promise[this.videoid] = { res: [], rej: [] };
+                    try {
+                        if (window.mep_bilibili.cors_proxy === "") {
+                            window.mep_bilibili.bilibili_api_cache[this.videoid] = await (await fetch(`${window.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.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.mep_bilibili.bilibili_api_promise[this.videoid].res.forEach((resolve) => { resolve(window.mep_bilibili.bilibili_api_cache[this.videoid]); });
+                    resolve(window.mep_bilibili.bilibili_api_cache[this.videoid]);
+                }
+                else {
+                    window.mep_bilibili.bilibili_api_promise[this.videoid].res.push(resolve);
+                    window.mep_bilibili.bilibili_api_promise[this.videoid].rej.push(reject);
+                    return;
+                }
+            }
+            else {
+                resolve(window.mep_bilibili.bilibili_api_cache[this.videoid]);
+            }
+        }
+    });
+}, _mep_bilibili_messageListener = function _mep_bilibili_messageListener() {
+    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 } }));
+        }
+    });
 };
-mep_bilibili.localStorageCheck = null;
-mep_bilibili.mep_extension_bilibili = false;
-mep_bilibili.api_endpoint = "https://iframe_api.ryokuryu.workers.dev";
-mep_bilibili.no_extention_error = "you seems not to install mep_extension yet.if it not installed in your browser,you can't exact some function(mute unMute setVolume etc) and some function(getDuration,getPlayerState etc) will return incorrect data which is not reflect real data";
-mep_bilibili.player_base_url = "";
+mep_bilibili.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" };
+mep_bilibili.localStorageCheck = null; //ニコニコと同じくlocalstorageにアクセスできないと死ぬため
+mep_bilibili.mep_extension_bilibili = false; //拡張機能ないとまともに動かん
+mep_bilibili.api_endpoint = "https://iframe_api.ryokuryu.workers.dev"; //please change this if you use
+mep_bilibili.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";
+mep_bilibili.player_base_url = ""; //"https://www.bilibili.com/blackboard/webplayer/embed-old.html?"
 mep_bilibili.bilibili_api_cache = {};
 mep_bilibili.cors_proxy = "";
 mep_bilibili.currentTime_delay = 2;
 mep_bilibili.bilibili_api_promise = {};
+// 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.mep_bilibili = mep_bilibili;
 //# sourceMappingURL=bilibili.js.map