vue video player设置禁止进度条拖动后在ios全屏又可以拖动

Vue Video Player是一个轻量级的基于HTML5视频播放器组件，它允许开发者定制视频播放体验。如果想要在iOS设备上禁止单纯地通过触摸进度条拖动，同时在全屏模式下仍然保持交互，可能需要结合一些特殊处理。

通常情况下，禁止用户直接触控进度条是通过监听touchmove事件并阻止其默认行为来实现的。但在iOS的全屏模式下，系统可能会有自己的行为规则，导致禁止操作的效果失效。解决这个问题的一个方法是在iOS设备上检测是否处于全屏模式，并相应调整手势管理：

1. 首先，在你的VideoPlayer组件中，添加一个变量`isFullScreen`用于存储当前是否全屏的状态，初始化为`false`。

data() {
  return {
    isFullScreen: false,
    // ...其他数据...
  };
},

2. 添加一个watcher监听设备的全屏状态变化：

mounted() {
  window.addEventListener('fullscreenchange', this.handleFullScreenChange);
},
beforeDestroy() {
  window.removeEventListener('fullscreenchange', this.handleFullScreenChange);
},
handleFullScreenChange(event) {
  this.isFullScreen = event.target.fullscreenElement === document.documentElement;
}

3. 然后在`methods`中，根据`isFullScreen`来控制touchmove事件的处理：

methods: {
  handleTouchMove(e) {
    if (!this.isFullScreen) {
      e.preventDefault(); // 在非全屏状态下阻止拖动
    }
  },
  // ...其他方法...
},

4. 绑定touchmove事件到video元素：

<template>
  <div v-touchmove="{ handler: handleTouchMove }">
    <!-- video 元素 -->
    <video ref="player" @touchmove.prevent></video>
  </div>
</template>

当`isFullScreen`为true时，阻止默认行为的代码将不再生效，因此用户可以在全屏模式下自由滑动。然而，这并不保证完全禁用拖动，因为iOS有时会提供自己的触摸滑动功能，特别是在视频广告或某些特殊场景下。