vue+树莓派实现实时视频播放暂停

 

声明实时视频是树莓派外接usb摄像头，通过摄像头实时抓取照片，通过不断更新页面照片形成视频效果，无麦克风

 

效果如下

未开始时

点击开始按钮

贴代码时刻即将到来

<!--视频组件-->
<template>
    <div class="header">
        <h2 style="clear: both">
            {{DevcieName}}
              <i style="cursor: pointer;" class="el-icon-close" @click="handleCmp('delete',  componentIndex)"></i>
            </h2>
        <div style="width: 100%;height: 100%" @click="reverseplay">
            <img v-show="playstatus" style="width: 100%;height: 100%" :src="address" @load="refreshFile(playstatus)">
            <div>
                <Icon v-show="!playstatus" type="ios-play-outline" size="80"/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'Video',
  data() {
    return {
      playstatus: false,
      number: 0,
      DevcieName: '等待添加设备',
    };
  },
  computed: {
    address() {
      const imgaddress = `http://192.168.0.174:8080/?action=snapshot&n=${this.number}`;
      return imgaddress;
    },
  },
  watch: {
    // 控制播放暂停
    playstatus: {
      handler(newDataSou) {
        // number+1诱惑img标签onload函数触发，从而实现刷新和暂停
        this.number += 1;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 开始和关闭
    reverseplay() {
      this.playstatus = !this.playstatus;
    },
    // 控制刷写时间
    refreshFile(stauts) {
      const self = this;
      if (stauts) {
        setTimeout(() => {
          self.number += 1;
        }, 10);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.header{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    video{
        width: 100%;
        height: 100%;
        object-fit:fill;
    }
}
</style>