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

現場感のある話

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>ʹίϯτϩʔϧΛॏͶΔ
13. 再生速度を変更する • <video>ͷ playback-rateଐੑΛมߋ͢Δ
15. Ͱ͖·ͨ͠ʂ
16. ΊͰͨ͠ΊͰͨ͠
17. ड͚ೖΕ৚݅ ɾඪ४ίϯτϩʔϧͱදࣔΛ͋ΘͤΔ
18. Μͬʁʂ
19. 標準コントロール（だいたい） • Ϛ΢εΛಈ͔͢ͱݱΕΔ • Ϛ΢εΛࢭΊͯ2ඵ͘Β͍͢Δͱফ͑Δ • ը໘֎ʹϑΥʔΧεΞ΢τ͢Δͱফ͑Δ • ࠶ੜ͕ࢭ·ΔͱݱΕΔ • ϒϥ΢βʹΑͬͯৄࡉ͸ҟͳΔ
21. 標準コントロール（スマホ • λονͨ͠ΒݱΕΔ • ΋͏Ұ౓λον͢Δͱফ͑Δ • ࣌ؒܦաͰ΋ফ͑Δ • ͳΜ͔PCͷϒϥ΢βͱ࣌ؒҧ͏ͬΆ͍
22. ΋ʔແཧʂ
23. ΍ΊΑ͏ʂ
24. 検討したこと • ࠶ੜ଎౓มߋίϯϙʔωϯτ͚ͩ௥Ճ • ↑දࣔͷλΠϛϯάΛ͋ΘͤΔͷ͕ແཧήʔ • ಈըϓϨΠϠʔͷίϯτϩʔϥʔΛϑϧεΫϥον • ↑ͦ͜·Ͱίετ͔͚ͨ͘ͳ͍ • ϥΠϒϥϦʹཔΔ • ↑ίεύྑͦ͞͏
25. Plyr
26. 再生速度も変更できる！
27. ʮͲ͔ͬ͢ʁʯ ʮ͑͑ΜͪΌ͏ʁʯ
28. ελΠϧ่͕ΕΔͳͲ ࡉ͔͍मਖ਼Λͯ͠…
30. ΊͰͨ͠ΊͰͨ͠…
31. Ͱ͸ͳ͍Μͩͳ
32. εϥΠυγϣʔػೳ
33. ͋ʔʂ ϖʔδΊ͘Γʹ ΠϕϯτऔΒΕΔ
34. 兄弟要素なのでz-indexできなかった
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. ΊͰͨ͠ΊͰͨ͠