Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Programming - Lesson 5
Search
Ryan Chung
May 06, 2020
Technology
1
430
Web Programming - Lesson 5
Ryan Chung
May 06, 2020
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
300
Design Voice-First Games for Alexa
ryan403
0
59
AI Teaching Talk
ryan403
0
120
Cognitive Service
ryan403
0
100
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
160
JavaScript Practices
ryan403
0
100
Web Programming - Lesson 6
ryan403
1
620
Web Programming - Lesson 7
ryan403
1
630
Other Decks in Technology
See All in Technology
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
AI開発ツールCreateがAnythingになったよ
tendasato
0
120
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
0
300
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
700
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
120
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
339
57k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Scaling GitHub
holman
463
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Writing Fast Ruby
sferik
628
62k
A Modern Web Designer's Workflow
chriscoyier
696
190k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
Web Programming –
[email protected]
行動開發學院 行動開發學院 JavaScript Lab Youtube心情點唱機 Ryan
Chung 91
Web Programming –
[email protected]
行動開發學院 行動開發學院 想要解決的問題 • MTV Video前面故事很長,只想聽副歌
• 希望可以串起來播放 • 可以方便設定每首歌的播放開始與結束時間 • 畫面總是充滿著置入行銷連結 • 不想結束時看到一堆相關影片 92
Web Programming –
[email protected]
行動開發學院 行動開發學院 不想看到最上面的標題 93
Web Programming –
[email protected]
行動開發學院 行動開發學院 每次影片結束時都會有一堆相關影片 94
Web Programming –
[email protected]
行動開發學院 行動開發學院 影片播放時常有置入行銷連結 95
Web Programming –
[email protected]
行動開發學院 行動開發學院 預期畫面 • 按下按鈕開始播放,並顯示歌曲標題 •
播完一首會接著播下一首 • 都只播設定好的副歌段落 96
Web Programming –
[email protected]
行動開發學院 行動開發學院 檔案 • index.html:主要顯示頁面 •
main.js:主要程式運作 • style.css:網頁樣式檔 • playlist.js:影片來源與播放起訖時間 97
Web Programming –
[email protected]
行動開發學院 行動開發學院 index.html • iframe_api、playiist.js、h1、div、button 98
Web Programming –
[email protected]
行動開發學院 行動開發學院 style.css 99
Web Programming –
[email protected]
行動開發學院 行動開發學院 playlist.js 100
Web Programming –
[email protected]
行動開發學院 行動開發學院 main.js 101
Web Programming –
[email protected]
行動開發學院 行動開發學院 當YouTube API準備好時,設定播放器 102
Web Programming –
[email protected]
行動開發學院 行動開發學院 當播放器準備好時,設定按鈕事件 103
Web Programming –
[email protected]
行動開發學院 行動開發學院 一首播完就跳下一首 104
Web Programming –
[email protected]
行動開發學院 行動開發學院 Recap • HTML –h1,
h2, div, id, button • JavaScript –event trigger, object –if...else if • 資料檔案 –陣列 • 外部資源 –YouTube iFrame API 105
Web Programming –
[email protected]
行動開發學院 行動開發學院 Lab • 瀏覽YouTube IFrame
Player API • 瀏覽Player 變數有哪些 • 應用 –網頁遊戲與影片結合,勝利或特定情況就撥不同 影片 –影片串接 106