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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

͓ͭ·Έ Έ͍ͨͳ࿩ͳͷͰؾָʹ…

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

動画再生速度を変更する  コンポーネントを作ろうとして諦めた話

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

デザイン

Slide 10

Slide 10 text

ͳΔ΄Ͳʁ

Slide 11

Slide 11 text

動画にコントロールを重ねる • Λposition:relativeͳ

ͰғΉ • position:absoluteͳ

ʹίϯτϩʔϧΛॏͶΔ

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Ͱ͖·ͨ͠ʂ

Slide 16

Slide 16 text

ΊͰͨ͠ΊͰͨ͠

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Μͬʁʂ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

΋ʔແཧʂ

Slide 23

Slide 23 text

΍ΊΑ͏ʂ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Plyr

Slide 26

Slide 26 text

再生速度も変更できる！

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ελΠϧ่͕ΕΔͳͲ ࡉ͔͍मਖ਼Λͯ͠…

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

ΊͰͨ͠ΊͰͨ͠…

Slide 31

Slide 31 text

Ͱ͸ͳ͍Μͩͳ

Slide 32

Slide 32 text

εϥΠυγϣʔػೳ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Observerతͳ…ʁ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

MutationObserver

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

MutationObserverΛnew ͯ͠observe()

Slide 44

Slide 44 text

ΠϕϯτΛ$emit

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

΍ͬͨͥʂʢϦϦʔεʣ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

ΊͰͨ͠ΊͰͨ͠