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
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give ...
Search
果物リン
August 25, 2020
Technology
6
930
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
現場感のある話
果物リン
August 25, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
75
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
120
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
860
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
140
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.6k
Other Decks in Technology
See All in Technology
アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1
ks91
PRO
0
150
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
AWS DDoS攻撃防御の最前線
ryutakondo
1
180
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
770
Delegate authentication and a lot more to Keycloak with OpenID Connect
ahus1
0
240
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
100
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
3
1.6k
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
180
テストを実行してSorbetのsigを書こう!
sansantech
PRO
1
130
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
180
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
220
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
3
340
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Site-Speed That Sticks
csswizardry
10
770
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Being A Developer After 40
akosma
90
590k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.8k
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ͱ͔͑ΔͶ
ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ
ͬͨͥʂʢϦϦʔεʣ
まとめっぽいもの • ຊʹղܾ͍ͨ͠ͷཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબͳ͚ΕͳΜͱͳΔ
• ͜ͱ͋Δ
ΊͰͨ͠ΊͰͨ͠