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

Web Programming - Lesson 5

Ryan Chung
May 06, 2020
Technology
1
390

Web Programming - Lesson 5

Ryan Chung

May 06, 2020
Tweet

More Decks by Ryan Chung

See All by Ryan Chung
MovieBot Development
ryan403
0
280
Design Voice-First Games for Alexa
ryan403
0
40
AI Teaching Talk
ryan403
0
100
Cognitive Service
ryan403
0
84
jQuery & API Practices
ryan403
0
110
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
85
Web Programming - Lesson 6
ryan403
1
570
Web Programming - Lesson 7
ryan403
1
590

Other Decks in Technology

See All in Technology
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
MLOps の現場から
asei
6
630
Storage Browser for Amazon S3
miu_crescent
1
110
NW-JAWS #14 re:Invent 2024（予選落ち含）で 発表された推しアップデートについて
nagisa53
0
250
Amazon Kendra GenAI Index 登場でどう変わる？ 評価から学ぶ最適なRAG構成
naoki_0531
0
100
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
210
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
3
1.4k
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
120
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
The Invisible Side of Design
smashingmag
298
50k
Code Review Best Practice
trishagee
65
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Philosophy of Restraint
colly
203
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Designing for Performance
lara
604
68k

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