Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Programming - Lesson 5

Web Programming - Lesson 5

Ryan Chung

May 06, 2020
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. Web Programming – [email protected] 行動開發學院 行動開發學院 想要解決的問題 • MTV Video前面故事很長,只想聽副歌

    • 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 92
  2. Web Programming – [email protected] 行動開發學院 行動開發學院 檔案 • index.html:主要顯示頁面 •

    main.js:主要程式運作 • style.css:網頁樣式檔 • playlist.js:影片來源與播放起訖時間 97
  3. Web Programming – [email protected] 行動開發學院 行動開發學院 Recap • HTML –h1,

    h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –YouTube iFrame API 105
  4. Web Programming – [email protected] 行動開發學院 行動開發學院 Lab • 瀏覽YouTube IFrame

    Player API • 瀏覽Player 變數有哪些 • 應用 –網頁遊戲與影片結合,勝利或特定情況就撥不同 影片 –影片串接 106