vue-video-player禁用左键暂停以及监听全屏事件

项目有要求,页面有多个视频流,点击某个视频,能够对其中一个监控器进行操作。

vue-video-player禁用左键暂停:

CSS解决办法:会禁掉所有的鼠标事件

.vjs-custom-skin > .video-js {
  pointer-events: none
}
vue-video-player监听全屏事件:
<video-player
    :playsinline="true"
    //增加监听事件
    :events="events"
    :options="playerOptions"
    class="video-player vjs-custom-skin"
    @fullscreenchange="handlefullscreenchange"
  />
  data(){
    return {
    //增加监听全屏事件
    events: ['fullscreenchange'],
    }
  }
  methods:{
  handlefullscreenchange(val) {
  //因为我是又封装了一个组件,打印val会有相应所需的属性,全屏状态为:isFullscreen_
      this.$emit('fullscreenchange', val);
    }
  }

你可能感兴趣的:(VUE,vue,css,javascript)