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
870
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/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
21
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
76
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
710
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
99
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.5k
Other Decks in Technology
See All in Technology
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
300
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
Fargateを使った研修の話
takesection
0
110
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
300
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
Featured
See All Featured
RailsConf 2023
tenderlove
29
880
Rails Girls Zürich Keynote
gr2m
93
13k
Ruby is Unlike a Banana
tanoku
96
11k
Building Applications with DynamoDB
mza
90
6.1k
BBQ
matthewcrist
85
9.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Cult of Friendly URLs
andyhume
78
6k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
39
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ͱ͔͑ΔͶ
ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ
ͬͨͥʂʢϦϦʔεʣ
まとめっぽいもの • ຊʹղܾ͍ͨ͠ͷཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબͳ͚ΕͳΜͱͳΔ
• ͜ͱ͋Δ
ΊͰͨ͠ΊͰͨ͠