How 哥宇宙宣傳網頁試作

發表於 更新於 分類於 Disqus：

因為太喜歡 Howhow 了，我課程作業想不到題材，就拿來宣傳 How 哥宇宙好了 XD
以下記錄頁內錨點、Youtube Player API 的部份

先放上作品 (有彩蛋，記得開耳機 XD)

See the Pen HW4-32 設計三欄版型_ytapi| Hexschool HTML, CSS by Chiu (@ayugioh2003) on CodePen.

一、設定頁內錨點與滾動效果

其實設定頁內錨點還滿簡單的，只要 a 的連結和 id 的名字一樣就好。這樣點下去，頁面就會自動跳到 div 那裡。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="header">
    <h1>How哥宇宙</h1>
    <ul class="menu">
    <li><a href="#intro">關於How哥宇宙</a></li>
    <li><a href="#tree">How哥宇宙分支</a></li>
    <li><a href="#review">別人的評價</a></li>
    <li><a onclick="playAll()">彩蛋</a></li>
    </ul>
</div>
<div class="intro" id="intro">
<div class="content" id="tree">
<div class="review" id="review">

至於產生滾動效果的話，只要加入以下 css 就好。不過目前(2018.04)貌似只有 Firefox 和 Chrome 兩個瀏覽器有支援而已 orz

1
2
3
html {
  scroll-behavior: smooth;
}

參考資料

二、Youtube Player API

Howhow 在三月多的時候，發佈了一個影片。因為內嵌一個品質不錯、但又無腦的、叫做 How 哥宇宙的 MV。後來就很多人開始二創，用自己會的樂器來接龍演奏樂器。先附上原始影片和始作俑者

總之呢，我的目標就是在網頁上放一個按鈕，然後我只要按這個按鈕，就能控制所有被內嵌在網頁上的 Youtube iframe 的播放。然後我就一直撞牆了，冏。

在查詢的過程中，發現要操作 iframe 好像是件困難的事情，因為 iframe 裡的資料其實是其他網站的資料，這有點像是跨域請求的概念。之前有接觸過一點 AJAX，知道跨域的東西 hen 麻煩。

就當我快失去信心，意興闌珊的隨便組合關鍵字在 google 上 google 時，意外發現 Youtube IFrame Player API 這個東西。這東西帶給了我一線生機啊！

假設原本使用 iframe 內嵌的話，語法會是這樣

1
<iframe src="https://www.youtube.com/embed/PEr5agHOTcg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

改用 API 後， html 部份只要加入一個 div，其他靠 JS 來處理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
     <!-- 這個DIV是用來顯示iframe的 -->
     <div id="ytplayer"></div>
 </body>
 <script src="https://www.youtube.com/iframe_api"></script> 
 <script>

   // 自訂影片物件的變數名稱
   var player; 
 
   // API 提供的函數名稱。API js 已經準備好了，這函式就會開始執行
   function onYouTubeIframeAPIReady() {  

     // 初始化影片物件，並指定影片要放在哪個 id 的 div 上面
     player = new YT.Player('ytplayer', {
       videoId: 'PEr5agHOTcg', //你的Youtube 影片ID
       events: {
         'onStateChange': function(event) {
           if (event.data == YT.PlayerState.PLAYING) {
             alert('hello!');  //這邊是當開始播放後，需要做的動作
           }
         }
       }
     });
   }
 </script>

之後要控制影片的播放的話，就可以透過 api 來操作。例如

1
2
player.playVideo();
player.stopVideo();

如果要達成自訂按鈕來播放影片的話，就需要添加 JavaScript DOM EventListener

1
2
3
// js
var btn = document.querySelector("button");
btn.addEventListener('click', playVideo)   // 我想像中應該是這樣用啦

只是後來我不曉得哪邊沒調整到，試不出來，就只好用 HTML onclick 事件屬性 來添加

1
<button onclick="player.playVideo()">Click ME</button>

最後在附上一次 How 哥宇宙宣傳網頁 XD
(這是我自己的二創啦，不是真的官方 der)

See the Pen HW4-32 設計三欄版型_ytapi| Hexschool HTML, CSS by Chiu (@ayugioh2003) on CodePen.

附上參考資料
BTW，這 API 好像更新的很快，要用之前可先確認官方的說明手冊變了沒 orz