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

現場感のある話

Transcript

1. 動画再生速度を変更する

   コンポーネントを作ろう
   として諦めた話
   Ռ෺Ϧϯ@FruitRiin
   גࣜձࣾελσΟετ
   2020/08/25
   Vue.js v-tokyo ΦϯϥΠϯ Meetup #11
   

   View Slide

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

   View Slide

3. 自己紹介
   • Ռ෺Ϧϯ@FruitRiin
   • Twitter, Github, Qiita, SpeakerDeck
   • גࣜձࣾελσΟετ
   • Vue+RailsͰTeachme Biz͍ͬͯ͏αʔϏε
   • Vue͸͍͍ͧʂ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 動画再生速度を変更する

   コンポーネントを作ろう
   として諦めた話
   

   View Slide

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

   View Slide

9. デザイン
   

   View Slide

10. ͳΔ΄Ͳʁ
    

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. View Slide

15. Ͱ͖·ͨ͠ʂ
    

    View Slide

16. ΊͰͨ͠ΊͰͨ͠
    

    View Slide

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

    View Slide

18. Μͬʁʂ
    

    View Slide

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

    View Slide

20. View Slide

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

    View Slide

22. ΋ʔແཧʂ
    

    View Slide

23. ΍ΊΑ͏ʂ
    

    View Slide

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

    View Slide

25. Plyr
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

30. ΊͰͨ͠ΊͰͨ͠…
    

    View Slide

31. Ͱ͸ͳ͍Μͩͳ
    

    View Slide

32. εϥΠυγϣʔػೳ
    

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

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

    View Slide

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

    View Slide

38. Observerతͳ…ʁ
    

    View Slide

39. MutationObserver
    • MutationObserver ͱ͸ɺࢦఆͨ͠ίʔϧόοΫؔ਺Λ
    DOM ͷมߋ࣌ʹ࣮ߦͤ͞Δ API Ͱ͢ɻ
    ͜ͷ API ͸ɺDOM3 Events ͷ࢓༷Ͱఆٛ͞Ε͍ͯͨ
    Mutation Events Λ৽͘͠ઃܭ͠௚ͨ͠΋ͷͰ͢ɻ
    ʔMDN Web Docs
    

    View Slide

40. MutationObserver
    

    View Slide

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

    View Slide

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

    View Slide

43. MutationObserverΛnew ͯ͠observe()
    

    View Slide

44. ΠϕϯτΛ$emit
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. ΊͰͨ͠ΊͰͨ͠
    

    View Slide