Video

功能說明

1. 自動播放背景影片
2. 影片控制按鈕
3. Preloader

HTML重點

• Preloader設置

  <!-- preloader -->
  <div class="preloader">
      <img src="./preloader.gif" type="video/mp4">
  </div>
  

  • 將Preloader的Class設為preloader

• 背景影片與控制按鈕設置

  <!-- header -->
  <header>
      <!-- video -->
      <video class="video-container" muted autoplay loop>
          <source src="./video.mp4" type="video/mp4" />
      </video>
  
      <!-- title -->
      <h1>Video Project</h1>
  
      <!-- button -->
      <button class="switch-btn">
          <span>
              play
          </span>
          <span>
              pause
          </span>
          <!-- 按鈕內的位移方格 -->
          <span class="switch"></span>
      </button>
  </header>
  

  • 將影片的Class設為video-container
  • 將按鈕的Class設為switch-btn
  • 影片Class的屬性 :
    • muted : 影片靜音
    • autoplay : 馬上自動開始播放，不會停下來等影片資料下載完再開始播放
    • loop : 自動循環播放

CSS重點

• 按鈕內的位移方格原本有著自己的設定 :

  .switch {
    ...
    top: 0;
    left: 0;
    background: var(--clr-primary-5);
    ...
  }
  

• 但只要按鈕的Class多了slide，就會因為下列程式碼的影響，使得位移方塊往右移 :

  .slide .switch {
    left: 50%;
  }
  

  • 這種.class .class的作用，在【10】網頁練習 - 開合型FAQ中有提到

• Preloader原本也有著自己的設定 :

  .preloader {
    ...
    align-items: center;
    visibility: visible;
    z-index: 999;
    ...
  }
  

• 但只要Preloader的Class多了hide-preloader，就會隱藏起來:

  .hide-preloader {
    z-index: -999;
    visibility: hidden;
  }
  

JavaScript重點

1. 利用class="switch-btn"去抓取按鈕

   const btn = document.querySelector('.switch-btn');
   

2. 利用class="video-container"去抓取影片

   const video = document.querySelector('.video-container');
   

3. 新增按鈕點擊事件，進而控制影片播放

   btn.addEventListener('click',function(){ //新增點按鈕擊事件
       if(!btn.classList.contains("slide")){ //確認按鈕Class是否有"slide"
           btn.classList.add("slide"); //使按鈕內位移方塊往右移
           video.pause(); //影片暫停
       }else{
           btn.classList.remove("slide"); //使按鈕內位移方塊往左移
           video.play(); //影片繼續播放
       };
   });
   

4. 利用class="preloader"去抓取Preloader

   const preloader = document.querySelector('.preloader');
   

5. 設置Preloader的播放資訊

   window.addEventListener('load',function(){ //透過"load"事件來判斷整個網頁是否完全載入完成
       preloader.classList.add('hide-preloader'); //隱藏preloader
   }); 
   

   • DOMContentLoaded和load的差別，請見【06】網頁練習 - 按鈕翻頁

參考與引用來源

1. HTML Video屬性介紹