移动端滑动播放视频代码vue3

以下是一个使用 Vue 3 实现移动端滑动播放视频的示例代码：

<template>
  <div ref="videoContainer" class="video-container">
    <video ref="video" class="video" src="your-video-url"></video>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const videoContainer = ref(null);
    const video = ref(null);
    let startPlayTime = null;

    function handleTouchStart(event) {
      startPlayTime = video.value.currentTime;
    }

    function handleTouchMove(event) {
      const containerRect = videoContainer.value.getBoundingClientRect();
      const touchX = event.touches[0].clientX - containerRect.left;
      const progress = touchX / containerRect.width;
      const duration = video.value.duration;
      const currentTime = startPlayTime + progress * duration;
      video.value.currentTime = currentTime;
    }

    return {
      videoContainer,
      video,
      handleTouchStart,
      handleTouchMove,
    };
  },
  mounted() {
    this.$refs.videoContainer.addEventListener('touchstart', this.handleTouchStart);
    this.$refs.videoContainer.addEventListener('touchmove', this.handleTouchMove);
  },
  unmounted() {
    this.$refs.videoContainer.removeEventListener('touchstart', this.handleTouchStart);
    this.$refs.videoContainer.removeEventListener('touchmove', this.handleTouchMove);
  },
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>

该示例中，使用了 Vue 3 的 Composition API，通过 ref 函数创建了 videoContainer 和 video 两个响应式变量，在 setup 函数中定义了 handleTouchStart 和 handleTouchMove 两个事件处理函数，并将它们绑定到 videoContainer 元素上。在 handleTouchMove 函数中，通过计算触摸点相对于视频容器的偏移量，以及视频的总时长，计算出当前视频的播放位置，并设置为视频的当前时间。需要注意的是，在组件销毁时需要将事件处理函数从元素上解绑，以避免内存泄漏的问题。