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
55
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
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
300
An introduction to Claude Code SDK
choplin
2
1k
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Ace a Technical Interview
jacobian
278
23k
A designer walks into a library…
pauljervisheath
207
24k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Gamification - CAS2011
davidbonilla
81
5.4k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Unsuck your backbone
ammeep
671
58k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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