Vue.jsでVideoタグを扱う

気付けば単純なことだけど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日ほど経ったら思いついた。