AI_Video_LP/layouts/partials/components/carousel.html

<div class="my-4 carousel-wrapper">
  <div class="swiper carousel">
    <div class="swiper-wrapper">
      <!-- <div class="swiper-slide">
        <div class="toggle-video">
          <select onchange="setEwinFrame(this)">
            <option value="">切換主題</option>
            <option value="0922">0922 杭州亞運開跑</option>
            <option value="0927">0927 跆拳道表現亮眼</option>
          </select>
        </div>

        <div class="wrapper">
          <img src="/imgs/home/底圖-07.png"
            alt="ChoozMo｜AI主播｜AI｜華視｜華視團隊前進杭州 AI主播E-Win越洋連線｜杭州亞運開跑｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
          <div class="video-wrapper e-win">
            <iframe id="yt_ewin_frame" src="https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1"
              title="YouTube video player" frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowfullscreen></iframe>
          </div>
        </div>
      </div> -->

      <div class="swiper-slide">
        <a href="https://cmm.ai/taipei101/#/" target="_blank">
          <img src="/imgs/home/101_AI_Avatar.webp" alt="101｜ChoozMo｜AI主播｜AI｜AI Avatar｜AI智能客服｜AI人工智慧｜人工智能｜人工智慧｜虛擬人">
        </a>
      </div>

      <div class="swiper-slide">
        <img src="/imgs/home/ChoozMo_AI_Avatar.webp" alt="ChoozMo｜AI主播｜AI｜AI Avatar｜AI智能客服｜AI人工智慧｜人工智能｜人工智慧｜虛擬人">
      </div>

      <div class="swiper-slide">
        <!-- <iframe src="https://www.youtube.com/embed/EEl8P8VshKs?si=JCbDL2qYGtE06JYq" title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen></iframe> -->

        <img src="/imgs/home/亞錦賽-07.webp"
          alt="ChoozMo｜AI主播｜AI｜華視｜亞錦賽｜12月3號到12月10號鎖定亞錦棒球看華視｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
        <div class="cts-player-item">
          <div id="cts-player"></div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="toggle-video">
          <select onchange="setEwinFrame(this)">
            <option value="">切換主題</option>
            <option value="0922">0922 杭州亞運開跑</option>
            <option value="0926">0926 滑板國手</option>
            <option value="0927">0927 跆拳道表現亮眼</option>
            <option value="1005">1005 男籃勝</option>
            <option value="1010">1010 杭州西湖</option>
          </select>
        </div>

        <img src="/imgs/home/底圖-07.webp"
          alt="ChoozMo｜AI主播｜AI｜華視｜華視團隊前進杭州 AI主播E-Win越洋連線｜杭州亞運開跑｜人工智慧｜AI人工智慧｜人工智能｜虛擬主播｜虛擬人｜新聞播報">
        <div class="ewin-player-item">
          <div id="ewin-player"></div>
        </div>
      </div>

      <div class="swiper-slide">
        <a href="https://www.facebook.com/Ariel0702/?locale=zh_TW" target="_blank">
          <img src="/imgs/home/banner-main-01.png"
            alt="陳斐娟｜克隆娟｜三立iNEWS｜AI Spokesperson｜ChoozMo｜AI主播｜AI｜AI建模｜虛擬主播｜人工智慧｜客製化主播｜最新服務｜英文AI主播｜AI 虛擬主播｜生成式 AI技術｜Facelandmark｜deeplearning">
          <img src="/imgs/home/banner-main-02.png" alt="" class="person-img">
        </a>
        <div class="player-item">
          <div id="player"></div>
        </div>
      </div>

      <div class="swiper-slide">
        <a target="_blank" href="/main-news/警察廣播電台初次ai主播真人建模-與ChoozMo合作ai影片/">
          <div class="wrapper">
            <img src="/imgs/home/banner-01.jpg"
              alt="ChoozMo｜AI主播｜AI｜警察廣播電臺｜警廣｜警廣路況｜警廣線上收聽｜人工智慧｜AI人工智慧｜人工智能｜AI雙主播｜雙主播｜虛擬主播｜虛擬人｜新聞播報">
            <div class="video-wrapper">
              <iframe id="yt_frame" src="https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1"
                title="YouTube video player" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
            </div>
          </div>
        </a>
        <div class="frame-item">
          <select onchange="setFrame(this)">
            <option value="">切換語言</option>
            <option value="國語">國語</option>
            <option value="臺語">臺語</option>
            <option value="英文">英文</option>
            <option value="日文">日文</option>
            <option value="泰文">泰文</option>
            <option value="印尼文">印尼文</option>
            <option value="越南文">越南文</option>
            <option value="馬來文">馬來文</option>
            <option value="原住民語">原住民語(阿美族)</option>
            <option value="客語">客語</option>
            <option value="手語">手語</option>
          </select>
        </div>
      </div>

      <div class="swiper-slide">
        <a href="/main-news/virtual-production-studio-turnkey-solution/">
          <img src="/imgs/home/banner-02.jpg"
            alt="Turnkey Solution｜Virtual Production Studio｜AI Spokesperson｜ChoozMo｜AI主播｜AI｜AI建模｜虛擬主播｜人工智慧｜客製化主播｜最新服務｜英文AI主播｜AI 虛擬主播｜生成式 AI技術｜Facelandmark｜deeplearning">
          <!-- <img src="/imgs/home/banner01_mb.webp" alt="Choozmo in 2023CES" class="d-block d-md-none p-4"> -->
        </a>
      </div>
    </div>
  </div>
  <div class="swiper-button-next d-none d-md-block"></div>
  <div class="swiper-button-prev d-none d-md-block"></div>
  <div class="swiper-pagination"></div>
</div>

<script>
  // 載入 YouTube API
  let tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  let firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 在 API 載入完成後建立影片播放器
  let player;
  let ewinPlayer;
  let cts;

  function onYouTubeIframeAPIReady() {
    setupPlayer('player', 'vS8D5h7oUU0'); // 克隆娟
    setupPlayer('ewin-player', 'YvmyRn6e9uw'); // 亞運
    setupPlayer('cts-player', 'EEl8P8VshKs'); // 亞錦賽
  }

  function setupPlayer(playerId, videoId) {
    const player = new YT.Player(playerId, {
      videoId: videoId,
      playerVars: {
        'autoplay': 0, // 不自動播放
        'controls': 1,  // 顯示播放控制項
        'showinfo': 0, // 隱藏影片標題
        'rel': 0, // 不顯示相關影片推薦
      },
      events: {
        'onReady': function (event) {
          // 隱藏影片播放器
          event.target.mute();

          let posterDiv = document.createElement('div');
          let playerItem = document.querySelector(`.player-item`);

          let ewinDiv = document.createElement('div');
          let playerEwinItem = document.querySelector('.ewin-player-item');

          let ctsDiv = document.createElement('div');
          let playerCtsItem = document.querySelector('.cts-player-item');

          // 設定封面圖片(在影片上放封面圖片 div)
          posterDiv.classList.add('poster'); // 克隆娟
          event.target.getIframe().parentNode.insertBefore(posterDiv, event.target.getIframe());

          ewinDiv.classList.add('ewin'); // 亞運
          event.target.getIframe().parentNode.insertBefore(ewinDiv, event.target.getIframe());

          ctsDiv.classList.add('cts'); // 亞錦賽
          event.target.getIframe().parentNode.insertBefore(ctsDiv, event.target.getIframe());

          setTimeout(() => {
            playerItem.style.opacity = '1';
            playerEwinItem.style.opacity = '1';
            playerCtsItem.style.opacity = '1';
          }, 100);

          posterDiv.addEventListener('click', function () {
            posterDiv.style.display = 'none'; // 隱藏封面圖片
            event.target.unMute();
            event.target.setVolume(100);
            event.target.playVideo();
          });

          ewinDiv.addEventListener('click', function () {
            ewinDiv.style.display = 'none'; // 隱藏封面圖片
            event.target.unMute();
            event.target.setVolume(100);
            event.target.playVideo();
          });

          ctsDiv.addEventListener('click', function () {
            ctsDiv.style.display = 'none'; // 隱藏封面圖片
            event.target.unMute();
            event.target.setVolume(100);
            event.target.playVideo();
          });
        }
      }
    });
  }

  function setFrame(select) {
    let val = select.value;
    if (val === "國語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/HgrjL8pTpUY?autoplay=1&mute=1');
    } else if (val === "臺語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/iub7XwIIKsU?autoplay=1&mute=1');
    } else if (val === "英文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/J0rMl5Aje8E?autoplay=1&mute=1');
    } else if (val === "日文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/STBlnumMtJI?autoplay=1&mute=1');
    } else if (val === "泰文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/IQSNsUpzH4M?autoplay=1&mute=1');
    } else if (val === "印尼文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/moxFwtySJM8?autoplay=1&mute=1');
    } else if (val === "越南文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/QfmlSYbvNsg?autoplay=1&mute=1');
    } else if (val === "馬來文") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/7jTyzenud8o?autoplay=1&mute=1');
    } else if (val === "原住民語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/oGEX1P9AF9Y?autoplay=1&mute=1');
    } else if (val === "客語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/OlyafG6Oxtk?autoplay=1&mute=1');
    } else if (val === "手語") {
      $('#yt_frame').attr('src', 'https://www.youtube.com/embed/ycUAa3iKjhA?autoplay=1&mute=1');
    }
  }

  function setEwinFrame(select) {
    let val = select.value;
    let player = document.querySelector('#ewin-player');
    let ewinImg = document.querySelector('.ewin');
    ewinImg.style.display = 'none';  // 隱藏封面圖片

    if (val === "0922") {
      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1');
    } else if (val === "0926") {
      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/NQ7jKWlWOLk?autoplay=1&mute=1');
    } else if (val === "0927") {
      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/woLoY-rw2pw?autoplay=1&mute=1');
    } else if (val === "1005") {
      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/DSMvO1IOHdU?autoplay=1&mute=1');
    } else if (val === "1010") {
      $('#ewin-player').attr('src', 'https://www.youtube.com/embed/fb-kf9GYErE?autoplay=1&mute=1');
    }
  }
</script>