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

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. ΊͰͨ͠ΊͰͨ͠