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日ほど経ったら思いついた。