vue点击视频预览图实现视频播放或暂停

以popmart官网的视频为例，这个视频在点击播放按钮时才会播放，再次点击时会将视频暂停

所需知识：
1.首先知道标签里有.paused节点，当视频播放时返回true，反之返回false。也就是说:
html:

js:

var video1=document.getElementById("videoPlay1");
     console.log(video1.paused);//true

同时还有.pause() .play()函数，执行.pause()时视频暂停，执行.play()时播放视频，这里不再演示

2.通过给元素添加ref属性，然后this.$refs.ref的值 即可获取到元素的节点。也就是说：
html

<div ref="text"></div>

js：

console.log(this.$refs.text.style)//此元素的样式

实现逻辑：
1.为video属性加上ref标签获取其节点。

     <video class="video" controls="controls" ref="startvideo">
       <source src="" type="video/mp4">
     video>

2.设置一个div，设置下背景啥变成一个图片，然后添加事件，定义事件

     <div class="video_btn"
          @click.stop="startvideo"
          v-show="isshow">
     div>

  methods: {
    startvideo: function(){
      if(this.$refs.startvideo.paused){
        this.$refs.startvideo.play()
       }else{
       	this.$refs.startvideo.pause()
       }
    }

就是这么简单