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://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;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'vS8D5h7oUU0',  // YouTube 影片 ID
      playerVars: {
        'autoplay': 0,  // 不自動播放
        'controls': 1,  // 顯示播放控制項
        'showinfo': 0,  // 隱藏影片標題
        'rel': 0,  // 不顯示相關影片推薦
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 設定封面圖片
  function onPlayerReady(event) {
    // 隱藏影片播放器
    event.target.mute();

    // 在影片上放封面圖片 div
    let posterDiv = document.createElement('div');
    let playerItem = document.querySelector('.player-item');
    posterDiv.classList.add('poster');
    event.target.getIframe().parentNode.insertBefore(posterDiv, event.target.getIframe());

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

    posterDiv.addEventListener('click', function () {
      posterDiv.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;
    console.log('select',select.value);

    if (val === "0922") {
      $('#yt_ewin_frame').attr('src', 'https://www.youtube.com/embed/YvmyRn6e9uw?autoplay=1&mute=1');
    } else if (val === "0927") {
      $('#yt_ewin_frame').attr('src', 'https://www.youtube.com/embed/woLoY-rw2pw?autoplay=1&mute=1');
    }
  }
</script>