Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
果物リン
August 25, 2020
Technology
6
460
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
現場感のある話
果物リン
August 25, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
fruitriin
2
260
fruitriin
3
580
fruitriin
0
140
fruitriin
0
450
fruitriin
2
280
fruitriin
5
530
fruitriin
0
1.1k
fruitriin
2
650
fruitriin
1
190
Other Decks in Technology
See All in Technology
ymas0315
0
170
chaspy
1
120
kenya888
1
130
saoritakita
0
350
kanaugust
PRO
0
180
humank
0
220
ganariya
0
150
hololab
0
300
masashible
0
110
na2neko
0
110
opelab
2
290
ocise
1
1.3k
Featured
See All Featured
kneath
219
15k
jonrohan
1021
380k
stephaniewalter
260
11k
imathis
478
150k
deanohume
295
27k
brettharned
93
3k
roundedbygravity
241
21k
reverentgeek
168
7.1k
brianwarren
83
4.7k
iamctodd
17
1.8k
samlambert
237
9.9k
paulrobertlloyd
71
3.6k
Transcript
動画再生速度を変更する コンポーネントを作ろう として諦めた話 ՌϦϯ@FruitRiin גࣜձࣾελσΟετ 2020/08/25 Vue.js v-tokyo ΦϯϥΠϯ Meetup
#11
͓ͭ·Έ Έ͍ͨͳͳͷͰؾָʹ…
自己紹介 • ՌϦϯ@FruitRiin • Twitter, Github, Qiita, SpeakerDeck • גࣜձࣾελσΟετ
• Vue+RailsͰTeachme Biz͍ͬͯ͏αʔϏε • Vue͍͍ͧʂ
雑誌に特集が載りました!
ʮݱײͷ͋Δ͕ฉ͖͍ͨͰ͢ʯ ʮݱײͷ͋Δɾɾɾͦ͏Ͱ͢Ͷ͐ʯ
ϏδϡΞϥΠζखॱॻͷ࡞ɾڞ༗ɾཧͷTeachme Biz
動画再生速度を変更する コンポーネントを作ろう として諦めた話
仕様 • ಈըϓϨΠϠʔ্Ͱ࠶ੜΛઃఆͰ͖Δɻ • σβΠϯ༻ҙ͔ͨ͠Βʂ
デザイン
ͳΔ΄Ͳʁ
動画にコントロールを重ねる • <video>Λposition:relativeͳ<div>ͰғΉ • position:absoluteͳ<div>ʹίϯτϩʔϧΛॏͶΔ
None
再生速度を変更する • <video>ͷ playback-rateଐੑΛมߋ͢Δ
None
Ͱ͖·ͨ͠ʂ
ΊͰͨ͠ΊͰͨ͠
ड͚ೖΕ݅ ɾඪ४ίϯτϩʔϧͱදࣔΛ͋ΘͤΔ
Μͬʁʂ
標準コントロール(だいたい) • ϚεΛಈ͔͢ͱݱΕΔ • ϚεΛࢭΊͯ2ඵ͘Β͍͢Δͱফ͑Δ • ը໘֎ʹϑΥʔΧεΞτ͢Δͱফ͑Δ • ࠶ੜ͕ࢭ·ΔͱݱΕΔ •
ϒϥβʹΑͬͯৄࡉҟͳΔ
None
標準コントロール(スマホ • λονͨ͠ΒݱΕΔ • ͏Ұλον͢Δͱফ͑Δ • ࣌ؒܦաͰফ͑Δ • ͳΜ͔PCͷϒϥβͱ࣌ؒҧ͏ͬΆ͍
ʔແཧʂ
ΊΑ͏ʂ
検討したこと • ࠶ੜมߋίϯϙʔωϯτ͚ͩՃ • ↑දࣔͷλΠϛϯάΛ͋ΘͤΔͷ͕ແཧήʔ • ಈըϓϨΠϠʔͷίϯτϩʔϥʔΛϑϧεΫϥον • ↑ͦ͜·Ͱίετ͔͚ͨ͘ͳ͍ •
ϥΠϒϥϦʹཔΔ • ↑ίεύྑͦ͞͏
Plyr
再生速度も変更できる!
ʮͲ͔ͬ͢ʁʯ ʮ͑͑ΜͪΌ͏ʁʯ
ελΠϧ่͕ΕΔͳͲ ࡉ͔͍मਖ਼Λͯ͠…
None
ΊͰͨ͠ΊͰͨ͠…
Ͱͳ͍Μͩͳ
εϥΠυγϣʔػೳ
͋ʔʂ ϖʔδΊ͘Γʹ ΠϕϯτऔΒΕΔ
兄弟要素なのでz-indexできなかった
None
ϝχϡʔ։͍ͨΒফ͢…ʁ
ͰϝχϡʔPlyr͕ੜͨ͠ੜDOM…
Observerతͳ…ʁ
MutationObserver • MutationObserver ͱɺࢦఆͨ͠ίʔϧόοΫؔΛ DOM ͷมߋ࣌ʹ࣮ߦͤ͞Δ API Ͱ͢ɻ ͜ͷ API
ɺDOM3 Events ͷ༷Ͱఆٛ͞Ε͍ͯͨ Mutation Events Λ৽͘͠ઃܭͨ͠͠ͷͰ͢ɻ ʔMDN Web Docs
MutationObserver
ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ
ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ
MutationObserverΛnew ͯ͠observe()
ΠϕϯτΛ$emit
ΠΠײ͡ʂ ϖʔδૹΓϘλϯ ফ͑ͯΔ
*MutationObserverいいぞではない • VueͰཧ͞Εͯͳ͍ੜDOM͕ͦ͜ʹ͋Δ͔Β • VueͷίʔυͳΒదʹঢ়ଶཧ͢Ε͍͍͚ͩ • watchͱ͔͑ΔͶ
ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ
ͬͨͥʂʢϦϦʔεʣ
まとめっぽいもの • ຊʹղܾ͍ͨ͠ͷཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબͳ͚ΕͳΜͱͳΔ
• ͜ͱ͋Δ
ΊͰͨ͠ΊͰͨ͠