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
220
Design Voice-First Games for Alexa
ryan403
0
33
AI Teaching Talk
ryan403
0
78
Cognitive Service
ryan403
0
66
jQuery & API Practices
ryan403
0
97
CSS Practices
ryan403
1
120
JavaScript Practices
ryan403
0
82
Web Programming - Lesson 6
ryan403
1
550
Web Programming - Lesson 7
ryan403
1
580
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
競技としてのKaggle、役に立つKaggle
yu4u
3
640
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
230
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
150
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
520
Cracking the KubeCon CfP
inductor
2
240
web-application-security
matsuihidetoshi
0
160
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
370
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Agile that works and the tools we love
rasmusluckow
325
20k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
How to name files
jennybc
65
93k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Automating Front-end Workflow
addyosmani
1356
200k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Debugging Ruby Performance
tmm1
70
11k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
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