現場感のある話
動画再生速度を変更する コンポーネントを作ろうとして諦めた話ՌϦϯ@FruitRiinגࣜձࣾελσΟετ2020/08/25Vue.js v-tokyo ΦϯϥΠϯ Meetup #11
View Slide
͓ͭ·Έ Έ͍ͨͳͳͷͰؾָʹ…
自己紹介• ՌϦϯ@FruitRiin• Twitter, Github, Qiita, SpeakerDeck• גࣜձࣾελσΟετ• Vue+RailsͰTeachme Biz͍ͬͯ͏αʔϏε• Vue͍͍ͧʂ
雑誌に特集が載りました!
ʮݱײͷ͋Δ͕ฉ͖͍ͨͰ͢ʯʮݱײͷ͋Δɾɾɾͦ͏Ͱ͢Ͷ͐ʯ
ϏδϡΞϥΠζखॱॻͷ࡞ɾڞ༗ɾཧͷTeachme Biz
動画再生速度を変更する コンポーネントを作ろうとして諦めた話
仕様• ಈըϓϨΠϠʔ্Ͱ࠶ੜΛઃఆͰ͖Δɻ• σβΠϯ༻ҙ͔ͨ͠Βʂ
デザイン
ͳΔ΄Ͳʁ
動画にコントロールを重ねる• Λposition:relativeͳͰғΉ• position:absoluteͳʹίϯτϩʔϧΛॏͶΔ
再生速度を変更する• ͷ playback-rateଐੑΛมߋ͢Δ
Ͱ͖·ͨ͠ʂ
ΊͰͨ͠ΊͰͨ͠
ड͚ೖΕ݅ɾඪ४ίϯτϩʔϧͱදࣔΛ͋ΘͤΔ
Μͬʁʂ
標準コントロール(だいたい)• ϚεΛಈ͔͢ͱݱΕΔ• ϚεΛࢭΊͯ2ඵ͘Β͍͢Δͱফ͑Δ• ը໘֎ʹϑΥʔΧεΞτ͢Δͱফ͑Δ• ࠶ੜ͕ࢭ·ΔͱݱΕΔ• ϒϥβʹΑͬͯৄࡉҟͳΔ
標準コントロール(スマホ• λονͨ͠ΒݱΕΔ• ͏Ұλον͢Δͱফ͑Δ• ࣌ؒܦաͰফ͑Δ• ͳΜ͔PCͷϒϥβͱ࣌ؒҧ͏ͬΆ͍
ʔແཧʂ
ΊΑ͏ʂ
検討したこと• ࠶ੜมߋίϯϙʔωϯτ͚ͩՃ• ↑දࣔͷλΠϛϯάΛ͋ΘͤΔͷ͕ແཧήʔ• ಈըϓϨΠϠʔͷίϯτϩʔϥʔΛϑϧεΫϥον• ↑ͦ͜·Ͱίετ͔͚ͨ͘ͳ͍• ϥΠϒϥϦʹཔΔ• ↑ίεύྑͦ͞͏
Plyr
再生速度も変更できる!
ʮͲ͔ͬ͢ʁʯʮ͑͑ΜͪΌ͏ʁʯ
ελΠϧ่͕ΕΔͳͲࡉ͔͍मਖ਼Λͯ͠…
ΊͰͨ͠ΊͰͨ͠…
Ͱͳ͍Μͩͳ
εϥΠυγϣʔػೳ
͋ʔʂϖʔδΊ͘ΓʹΠϕϯτऔΒΕΔ
兄弟要素なのでz-indexできなかった
ϝχϡʔ։͍ͨΒফ͢…ʁ
ͰϝχϡʔPlyr͕ੜͨ͠ੜDOM…
Observerతͳ…ʁ
MutationObserver• MutationObserver ͱɺࢦఆͨ͠ίʔϧόοΫؔΛDOM ͷมߋ࣌ʹ࣮ߦͤ͞Δ API Ͱ͢ɻ͜ͷ API ɺDOM3 Events ͷ༷Ͱఆٛ͞Ε͍ͯͨMutation Events Λ৽͘͠ઃܭͨ͠͠ͷͰ͢ɻʔMDN Web Docs
MutationObserver
ͳΜ͔ͦΕͬΆ͍ͷऔΕΔʂ
MutationObserverΛnew ͯ͠observe()
ΠϕϯτΛ$emit
ΠΠײ͡ʂϖʔδૹΓϘλϯফ͑ͯΔ
*MutationObserverいいぞではない• VueͰཧ͞Εͯͳ͍ੜDOM͕ͦ͜ʹ͋Δ͔Β• VueͷίʔυͳΒదʹঢ়ଶཧ͢Ε͍͍͚ͩ• watchͱ͔͑ΔͶ
ʮͲ͏͔ͬ͢ʯʮ͑͑ΜͪΌ͏ʯ
ͬͨͥʂʢϦϦʔεʣ
まとめっぽいもの• ຊʹղܾ͍ͨ͠ͷཁٻ• ʮಈըͷඪ४ϝχϡʔͷಈ͖ʹ߹Θͤͯʯҙ֎ͱ͍͠• ·Δͬͱࠩ͠ସ͑ͯରԠ͠·ͨ͠• खஈΛબͳ͚ΕͳΜͱͳΔ• ͜ͱ͋Δ