https://www.tokyodome-hotels.co.jp/assets/common/scripts/modules/youtubePlayer.js

1export class YoutubePlayer {
2    elementId;
3    videoId;
4    static iframeApiReadyPromise = null;
5    static apiReadyResolvers = [];
6    player = null;
7    constructor(elementId, videoId) {
8        this.elementId = elementId;
9        this.videoId = videoId;
10    }
11    /** iframe_API読み込み */
12    static loadAPI() {
13        if (YoutubePlayer.iframeApiReadyPromise) {
14            return YoutubePlayer.iframeApiReadyPromise;
15        }
16        YoutubePlayer.iframeApiReadyPromise = new Promise((resolve) => {
17            YoutubePlayer.apiReadyResolvers.push(resolve);
18            const win = window;
19            // すでに API ロード済みなら即 resolve
20            if (win.YT?.Player) {
21                resolve();
22                return;
23            }
24            // すでに script タグがあるか確認
25            const existing = document.querySelector('script[src="https://www.youtube.com/iframe_api"]');
26            // script がまだない → 挿入
27            if (!existing) {
28                const tag = document.createElement('script');
29                tag.src = 'https://www.youtube.com/iframe_api';
30                document.head.appendChild(tag);
31            }
32            // YouTube API が ready になった時に全 callbacks を実行
33            window.onYouTubeIframeAPIReady = () => {
34                YoutubePlayer.apiReadyResolvers.forEach((cb) => {
35                    void cb();
36                });
37                YoutubePlayer.apiReadyResolvers = [];
38            };
39        });
40        return YoutubePlayer.iframeApiReadyPromise;
41    }
42    /** プレイヤー生成 */
43    async init() {
44        const container = document.getElementById(this.elementId);
45        if (!container) {
46            throw new Error(`YouTube target element #${this.elementId} was not found.`);
47        }
48        // API ロード
49        await YoutubePlayer.loadAPI();
50        // プレイヤー生成
51        await this.createPlayer();
52    }
53    /** プレイヤー生成処理 */
54    createPlayer() {
55        return new Promise((resolve, reject) => {
56            try {
57                this.player = new YT.Player(this.elementId, {
58                    videoId: this.videoId,
59                    events: {
60                        onReady: () => resolve(),
61                    },
62                });
63            }
64            catch (err) {
65                reject(err);
66            }
67        });
68    }
69    /** コントロールメソッド */
70    play() {
71        this.player?.playVideo();
72    }
73    pause() {
74        this.player?.pauseVideo();
75    }
76    stop() {
77        this.player?.stopVideo();
78    }
79    /** 指定秒へシーク */
80    seekTo(seconds, allowSeekAhead = true) {
81        this.player?.seekTo(seconds, allowSeekAhead);
82    }
83    destroy() {
84        this.player?.destroy();
85        this.player = null;
86    }
87}
88export default YoutubePlayer;