iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

從零開始學JavaScript系列 第 13

【13】網頁練習 - 背景影片與Preloader

  • 分享至 

  • xImage
  •  

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%;
    }
    
  • 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
    }); 
    

參考與引用來源

  1. HTML Video屬性介紹

上一篇
【12】網頁練習 - 分類型Menu(下)
下一篇
【14】網頁練習 - Tabs選單
系列文
從零開始學JavaScript24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言