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
910
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/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
50
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
110
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
810
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
130
とある自社開発の苦楽の軌跡/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
350
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.5k
Other Decks in Technology
See All in Technology
【Oracle Cloud ウェビナー】ご希望のクラウドでOracle Databaseを実行〜マルチクラウド・ソリューション徹底解説〜
oracle4engineer
PRO
1
120
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
800
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
320
グループ ポリシー再確認 (2)
murachiakira
0
120
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
130
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
1.1k
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
130
SDカードフォレンジック
su3158
1
640
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
3
460
更新系と状態
uhyo
8
2k
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
100
バックオフィス向け toB SaaS バクラクにおけるレコメンド技術活用 / recommender-systems-in-layerx-bakuraku
yuya4
5
590
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Embracing the Ebb and Flow
colly
85
4.7k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Facilitating Awesome Meetings
lara
54
6.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
How GitHub (no longer) Works
holman
314
140k
Side Projects
sachag
453
42k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
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ͱ͔͑ΔͶ
ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ
ͬͨͥʂʢϦϦʔεʣ
まとめっぽいもの • ຊʹղܾ͍ͨ͠ͷཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબͳ͚ΕͳΜͱͳΔ
• ͜ͱ͋Δ
ΊͰͨ͠ΊͰͨ͠