Web Programming - Lesson 5

Transcript

1. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 JavaScript Lab Youtube心情點唱機 Ryan Chung 91
2. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 想要解決的問題 • MTV Video前面故事很長，只想聽副歌 • 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 92
3. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 不想看到最上面的標題 93
4. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 每次影片結束時都會有一堆相關影片 94
5. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 影片播放時常有置入行銷連結 95
6. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 預期畫面 • 按下按鈕開始播放，並顯示歌曲標題 • 播完一首會接著播下一首 • 都只播設定好的副歌段落 96
7. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 檔案 • index.html：主要顯示頁面 • main.js：主要程式運作 • style.css：網頁樣式檔 • playlist.js：影片來源與播放起訖時間 97
8. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 index.html • iframe_api、playiist.js、h1、div、button 98
9. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 style.css 99
10. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 playlist.js 100
11. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 main.js 101
12. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 當YouTube API準備好時，設定播放器 102
13. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 當播放器準備好時，設定按鈕事件 103
14. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 一首播完就跳下一首 104
15. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Recap • HTML –h1, h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –YouTube iFrame API 105
16. Web Programming – Ryan@MobileDev.TW 行動開發學院 行動開發學院 Lab • 瀏覽YouTube IFrame Player API • 瀏覽Player 變數有哪些 • 應用 –網頁遊戲與影片結合，勝利或特定情況就撥不同 影片 –影片串接 106