js--基本video的实现

基本video的实现

一个视频，加上两个icon（开始和暂停）

<video id="video" width="200" height="200" src="../../static/test.mp4" @click="start"></video>
<img src="./stop.png" v-if="vStatus">
<img src="./start.png" v-cloak v-else>

import $ from 'jquery';

export default {
  data(){
    return{
      // 视频状态
      vStatus:false
    }
  },
  mounted(){
    // 给视频添加事件监听，当视频停止，改变状态值
    $("#video").on("ended", () =>{
        this.vStatus = false;
      })
  },
  methods:{
    // 视频开始或暂停方法
    start(){
      if(this.vStatus){
        $("#video").trigger("pause");
  		}else{
  			$("#video").trigger("play");	
  		}
      this.vStatus = !this.vStatus;  
    }
  }
}