$30 off During Our Annual Pro Sale. View Details »

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

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

現場感のある話

果物リン

August 25, 2020
Tweet

More Decks by 果物リン

Other Decks in Technology

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