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

1// videoToggle.ts
2(() => {
3    const config = {
4        rootSelector: '.js-video',
5        videoSelector: '.fn-video-media',
6        buttonSelector: '.js-video-toggle',
7        buttonTextSelector: '.fn-video-toggle__text',
8        classIsPlay: 'is-play',
9        textPlay: '再生する',
10        textPause: '停止する',
11    };
12    const roots = document.querySelectorAll(config.rootSelector);
13    if (!roots.length)
14        return;
15    roots.forEach((root) => {
16        const videos = root.querySelectorAll(config.videoSelector);
17        const btn = root.querySelector(config.buttonSelector);
18        const btnText = root.querySelector(config.buttonTextSelector);
19        if (!videos.length || !btn || !btnText)
20            return;
21        // 表示されている video を取得
22        const getActiveVideo = () => {
23            return Array.from(videos).find((video) => {
24                return window.getComputedStyle(video).display !== 'none';
25            });
26        };
27        btn.addEventListener('click', () => {
28            const video = getActiveVideo();
29            if (!video)
30                return;
31            if (video.paused) {
32                // 再生する
33                video.play();
34                btnText.textContent = config.textPause;
35                btn.classList.remove(config.classIsPlay);
36            }
37            else {
38                // 停止する
39                video.pause();
40                btnText.textContent = config.textPlay;
41                btn.classList.add(config.classIsPlay);
42            }
43        });
44    });
45})();
46export {};