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

Web Programming - Lesson 5

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ryan Chung Ryan Chung
May 06, 2020
Technology
1
450

Web Programming - Lesson 5

Avatar for Ryan Chung

Ryan Chung

May 06, 2020
Tweet

More Decks by Ryan Chung

See All by Ryan Chung
MovieBot Development
Avatar for Ryan Chung ryan403
0
320
Design Voice-First Games for Alexa
Avatar for Ryan Chung ryan403
0
75
AI Teaching Talk
Avatar for Ryan Chung ryan403
0
130
Cognitive Service
Avatar for Ryan Chung ryan403
0
110
jQuery & API Practices
Avatar for Ryan Chung ryan403
0
150
CSS Practices
Avatar for Ryan Chung ryan403
1
170
JavaScript Practices
Avatar for Ryan Chung ryan403
0
110
Web Programming - Lesson 6
Avatar for Ryan Chung ryan403
1
640
Web Programming - Lesson 7
Avatar for Ryan Chung ryan403
1
650

Other Decks in Technology

See All in Technology
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
120
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
340
Claude_CodeでSEOを最適化する_AI_Ops_Community_Vol.2__マーケティングx_AIはここまで進化した.pdf
Avatar for 小笠原理久 riku_423
2
420
Databricks Free Edition講座 データサイエンス編
Avatar for Takaaki Yayoi taka_aki
0
290
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.2k
あたらしい上流工程の形。 0日導入からはじめるAI駆動PM
Avatar for 熊井悠 kumaiu
5
750
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
73k
AI時代、1年目エンジニアの悩み
Avatar for JINYOUNG KIM jin4
1
160
オープンウェイトのLLMリランカーを契約書で評価する / searchtechjp
Avatar for Sansan R&D sansan_randd
3
650
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k
Meshy Proプラン課金した
Avatar for henjin0 henjin0
0
240

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Side Projects
Avatar for Sacha Greif sachag
455
43k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
1
240
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
420
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
46
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k

Transcript

  1. Web Programming – [email protected] 行動開發學院 行動開發學院 JavaScript Lab Youtube心情點唱機 Ryan

    Chung 91

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

    • 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 92

  3. Web Programming – [email protected] 行動開發學院 行動開發學院 不想看到最上面的標題 93

  4. Web Programming – [email protected] 行動開發學院 行動開發學院 每次影片結束時都會有一堆相關影片 94

  5. Web Programming – [email protected] 行動開發學院 行動開發學院 影片播放時常有置入行銷連結 95

  6. Web Programming – [email protected] 行動開發學院 行動開發學院 預期畫面 • 按下按鈕開始播放，並顯示歌曲標題 •

    播完一首會接著播下一首 • 都只播設定好的副歌段落 96

  7. Web Programming – [email protected] 行動開發學院 行動開發學院 檔案 • index.html：主要顯示頁面 •

    main.js：主要程式運作 • style.css：網頁樣式檔 • playlist.js：影片來源與播放起訖時間 97

  8. Web Programming – [email protected] 行動開發學院 行動開發學院 index.html • iframe_api、playiist.js、h1、div、button 98

  9. Web Programming – [email protected] 行動開發學院 行動開發學院 style.css 99

  10. Web Programming – [email protected] 行動開發學院 行動開發學院 playlist.js 100

  11. Web Programming – [email protected] 行動開發學院 行動開發學院 main.js 101

  12. Web Programming – [email protected] 行動開發學院 行動開發學院 當YouTube API準備好時，設定播放器 102

  13. Web Programming – [email protected] 行動開發學院 行動開發學院 當播放器準備好時，設定按鈕事件 103

  14. Web Programming – [email protected] 行動開發學院 行動開發學院 一首播完就跳下一首 104

  15. Web Programming – [email protected] 行動開發學院 行動開發學院 Recap • HTML –h1,

    h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –YouTube iFrame API 105

  16. Web Programming – [email protected] 行動開發學院 行動開發學院 Lab • 瀏覽YouTube IFrame

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