Video

功能說明

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

HTML重點

  • Preloader設置

    1
    2
    3
    4
    <!-- preloader -->
    <div class="preloader">
        <img src="./preloader.gif" type="video/mp4">
    </div>
    • 將Preloader的Class設為preloader

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <!-- 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重點

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

    1
    2
    3
    4
    5
    6
    7
    .switch {
      ...
      top: 0;
      left: 0;
      background: var(--clr-primary-5);
      ...
    }

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

    1
    2
    3
    .slide .switch {
      left: 50%;
    }

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

    1
    2
    3
    4
    5
    6
    7
    .preloader {
      ...
      align-items: center;
      visibility: visible;
      z-index: 999;
      ...
    }

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

    1
    2
    3
    4
    .hide-preloader {
      z-index: -999;
      visibility: hidden;
    }

JavaScript重點

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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

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

  5. 設置Preloader的播放資訊

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

參考與引用來源

  1. HTML Video屬性介紹