Edited at

Vue.jsでVideoタグを扱う

More than 1 year has passed since last update.

気付けば単純なことだけど2日程思いつかなかったので書いておく。


なにがしたかったか

Vueのメソッドの中で動画の再生制御


結論: カスタムディレクティブ使え


カスタムディレクティブ

Vue.directive('play',function (el, binding) {

if(binding.value){
el.play();
}else{
el.pause();
}
});

使うときは


HTML

<video src="sample.mp4" v-play="hoge"></video>


audioも一緒。


試行錯誤の過程

videoタグを直接扱う方法が思いつかず、メソッド内で

let video = this.$el.querySelector('video');

video.play();

なんてやらにゃならんのか汚いなー、それかビデオタグだけcomponentにして


カスタムコンポーネント

Vue.component('custome-video',{

template:'<video></video>',
props:{
playing:false
},
created:{
this.$watch('playing',function(val){
if(val){
this.$el.play();
}else{
this.$el.pause();
}
});
}
})

とかやらにゃならんかめんどいなー、なんてブツブツ考えていたけど2日ほど経ったら思いついた。