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
380
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
270
Design Voice-First Games for Alexa
ryan403
0
39
AI Teaching Talk
ryan403
0
95
Cognitive Service
ryan403
0
79
jQuery & API Practices
ryan403
0
98
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
84
Web Programming - Lesson 6
ryan403
1
560
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
ゼロから実装まで!機械学習入門
natsuki0726
0
220
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
130
スタサプ ForSCHOOLアプリのシンプルな設計
recruitengineers
PRO
3
720
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
2
2k
業務ヒアリングと知識の呪い
tamai_63
0
300
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
220
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
7
3.7k
Webセキュリティのあるきかた
akiym
32
11k
テストを楽に書きたい
tomorrowkey
1
220
とある事業会社にとっての Kaggler の魅力
hakubishin3
7
1.2k
RAG: from dumb implementation to serious results
glaforge
0
300
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Debugging Ruby Performance
tmm1
73
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Atom: Resistance is Futile
akmur
261
25k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Writing Fast Ruby
sferik
626
60k
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
GraphQLとの向き合い方2022年版
quramy
43
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
2
310
Faster Mobile Websites
deanohume
304
30k
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