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
420
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
54
AI Teaching Talk
ryan403
0
110
Cognitive Service
ryan403
0
96
jQuery & API Practices
ryan403
0
130
CSS Practices
ryan403
1
150
JavaScript Practices
ryan403
0
98
Web Programming - Lesson 6
ryan403
1
610
Web Programming - Lesson 7
ryan403
1
620
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
Claude Code に プロジェクト管理やらせたみた
unson
6
4.1k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
200
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
110
ゼロからはじめる採用広報
yutadayo
3
950
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
A Tale of Four Properties
chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Cult of Friendly URLs
andyhume
79
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Balancing Empowerment & Direction
lara
1
430
Six Lessons from altMBA
skipperchong
28
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Done Done
chrislema
184
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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