Upgrade to Pro — share decks privately, control downloads, hide ads and more …

動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller

果物リン
August 25, 2020
Technology
6
620

動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller

現場感のある話

果物リン

August 25, 2020
Tweet

More Decks by 果物リン

See All by 果物リン
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.1k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
60
読み上げチャット＋映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
15
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
170
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
300
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.1k
[社内LT]元窓使いで林檎教信者ですが窓使いに転生します/I'm an ex-windowman, a follower of the apple cult, but I'm turning into a windowman.
fruitriin
0
250
読書から始めるポモドーロ・テクニック/The Pomodoro Technique, starting with reading
fruitriin
0
1.1k
[社内LT]おいでよNuxtの森/Wellcome to Nuxt
fruitriin
2
640

Other Decks in Technology

See All in Technology
IIJmio meeting 33 IIJmio 2022年夏のおすすめ端末
iij_techlog
0
2.4k
デイリースクラムいらなくなくなくなーい！？
kitamu_mu
16
15k
LINE iOSのビルド環境の変遷 / Changes in LINE iOS Build Environment
line_developers
PRO
3
330
A1A会社紹介資料-2022-09-12
a1a
2
1.8k
TokyoR#101_RegressionAnalysis
kilometer
0
140
220914_ガンダム初学者が色々考えてみた_株式会社コミュカル Mitz
comucal
PRO
0
330
人と技術のモダナイズをScrumで実証してみた
koichimatsui
0
340
Feature Flagを使った開発で高速かつストレスフリーなデリバリーを実現する / Fast and stress-free delivery with Feature Flag-based development
imaizume
1
460
Azure Container Apps で .NET 7 アプリを Blue-Green デプロイしてみよう！/jazug12
thara0402
0
300
OSSのアプリケーションを開発「し続ける」ための哲学 / Philosophy to continue developing OSS application
1024jp
5
260
Instant Payments: moving money at (almost) light speed
_aitor
0
140
続CPUとは何か / What is a CPU continued
tomzoh
1
230

Featured

See All Featured
Raft: Consensus for Rubyists
vanstee
127
5.5k
How STYLIGHT went responsive
nonsquared
85
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
What the flash - Photography Introduction
edds
64
10k
Mobile First: as difficult as doing things right
swwweet
213
7.6k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Gamification - CAS2011
davidbonilla
75
4k
A designer walks into a library…
pauljervisheath
197
16k
What's new in Ruby 2.0
geeforr
335
30k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k

Transcript

  1. 動画再生速度を変更する
 コンポーネントを作ろう として諦めた話 Ռ෺Ϧϯ@FruitRiin גࣜձࣾελσΟετ 2020/08/25 Vue.js v-tokyo ΦϯϥΠϯ Meetup

    #11

  2. ͓ͭ·Έ Έ͍ͨͳ࿩ͳͷͰؾָʹ…

  3. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • Twitter, Github, Qiita, SpeakerDeck • גࣜձࣾελσΟετ

    • Vue+RailsͰTeachme Biz͍ͬͯ͏αʔϏε • Vue͸͍͍ͧʂ

  4. 雑誌に特集が載りました！

  5. ʮݱ৔ײͷ͋Δ࿩͕ฉ͖͍ͨͰ͢ʯ ʮݱ৔ײͷ͋Δ࿩ɾɾɾͦ͏Ͱ͢Ͷ͐ʯ

  6. ϏδϡΞϥΠζखॱॻͷ࡞੒ɾڞ༗ɾ؅ཧͷTeachme Biz

  7. 動画再生速度を変更する
 コンポーネントを作ろう として諦めた話

  8. 仕様 • ಈըϓϨΠϠʔ্Ͱ࠶ੜ଎౓ΛઃఆͰ͖Δɻ • σβΠϯ༻ҙ͔ͨ͠Βʂ

  9. デザイン

  10. ͳΔ΄Ͳʁ

  11. 動画にコントロールを重ねる • <video>Λposition:relativeͳ<div>ͰғΉ • position:absoluteͳ<div>ʹίϯτϩʔϧΛॏͶΔ

  12. None

  13. 再生速度を変更する • <video>ͷ playback-rateଐੑΛมߋ͢Δ

  14. None

  15. Ͱ͖·ͨ͠ʂ

  16. ΊͰͨ͠ΊͰͨ͠

  17. ड͚ೖΕ৚݅ ɾඪ४ίϯτϩʔϧͱදࣔΛ͋ΘͤΔ

  18. Μͬʁʂ

  19. 標準コントロール（だいたい） • Ϛ΢εΛಈ͔͢ͱݱΕΔ • Ϛ΢εΛࢭΊͯ2ඵ͘Β͍͢Δͱফ͑Δ • ը໘֎ʹϑΥʔΧεΞ΢τ͢Δͱফ͑Δ • ࠶ੜ͕ࢭ·ΔͱݱΕΔ •

    ϒϥ΢βʹΑͬͯৄࡉ͸ҟͳΔ
  20. None

  21. 標準コントロール（スマホ • λονͨ͠ΒݱΕΔ • ΋͏Ұ౓λον͢Δͱফ͑Δ • ࣌ؒܦաͰ΋ফ͑Δ • ͳΜ͔PCͷϒϥ΢βͱ࣌ؒҧ͏ͬΆ͍

  22. ΋ʔແཧʂ

  23. ΍ΊΑ͏ʂ

  24. 検討したこと • ࠶ੜ଎౓มߋίϯϙʔωϯτ͚ͩ௥Ճ • ↑දࣔͷλΠϛϯάΛ͋ΘͤΔͷ͕ແཧήʔ • ಈըϓϨΠϠʔͷίϯτϩʔϥʔΛϑϧεΫϥον • ↑ͦ͜·Ͱίετ͔͚ͨ͘ͳ͍ •

    ϥΠϒϥϦʹཔΔ • ↑ίεύྑͦ͞͏

  25. Plyr

  26. 再生速度も変更できる！

  27. ʮͲ͔ͬ͢ʁʯ ʮ͑͑ΜͪΌ͏ʁʯ

  28. ελΠϧ่͕ΕΔͳͲ ࡉ͔͍मਖ਼Λͯ͠…

  29. None

  30. ΊͰͨ͠ΊͰͨ͠…

  31. Ͱ͸ͳ͍Μͩͳ

  32. εϥΠυγϣʔػೳ

  33. ͋ʔʂ ϖʔδΊ͘Γʹ ΠϕϯτऔΒΕΔ

  34. 兄弟要素なのでz-indexできなかった

  35. None

  36. ϝχϡʔ։͍ͨΒফ͢…ʁ

  37. Ͱ΋ϝχϡʔ͸Plyr͕ੜ੒ͨ͠ੜDOM…

  38. Observerతͳ…ʁ

  39. MutationObserver • MutationObserver ͱ͸ɺࢦఆͨ͠ίʔϧόοΫؔ਺Λ DOM ͷมߋ࣌ʹ࣮ߦͤ͞Δ API Ͱ͢ɻ ͜ͷ API

    ͸ɺDOM3 Events ͷ࢓༷Ͱఆٛ͞Ε͍ͯͨ Mutation Events Λ৽͘͠ઃܭ͠௚ͨ͠΋ͷͰ͢ɻ ʔMDN Web Docs

  40. MutationObserver

  41. ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ

  42. ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ

  43. MutationObserverΛnew ͯ͠observe()

  44. ΠϕϯτΛ$emit

  45. ΠΠײ͡ʂ ϖʔδૹΓϘλϯ ফ͑ͯΔ

  46. ＊MutationObserverいいぞではない • VueͰ؅ཧ͞Εͯͳ͍ੜDOM͕ͦ͜ʹ͋Δ͔Β • VueͷίʔυͳΒద੾ʹঢ়ଶ؅ཧ͢Ε͹͍͍͚ͩ • watchͱ͔࢖͑ΔͶ

  47. ʮͲ͏͔ͬ͢ʯ ʮ͑͑ΜͪΌ͏ʯ

  48. ΍ͬͨͥʂʢϦϦʔεʣ

  49. まとめっぽいもの • ຊ౰ʹղܾ͍ͨ͠ͷ͸ཁٻ • ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯ ҙ֎ͱ೉͍͠ • ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠ • खஈΛબ͹ͳ͚Ε͹ͳΜͱͳΔ

    • ͜ͱ΋͋Δ

  50. ΊͰͨ͠ΊͰͨ͠