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

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

現場感のある話

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

August 25, 2020
Tweet

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