如何在uniapp开发一个滑动播放的小视频项目

1. 监听视频滑动

<template>
  <view class="video-container">
    <video ref="video" @touchmove="onTouchMove"></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0
    }
  },
  methods: {
    onTouchMove(e) {
      const { startX, startY } = this
      const touch = e.touches[0]
      const deltaX = touch.clientX - startX
      const deltaY = touch.clientY - startY
      // 判断滑动方向，如果是左右滑动则切换视频
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
          // 向右滑动，播放下一个视频
          this.playNextVideo()
        } else {
          // 向左滑动，播放上一个视频
          this.playPrevVideo()
        }
      }
      this.startX = touch.clientX
      this.startY = touch.clientY
    }
  }
}
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}
</style>

2. 播放和暂停

<template>
  <view class="video-container">
    <video ref="video" @play="onPlay" @pause="onPause"></video>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      // 视频播放时触发的事件
    },
    onPause() {
      // 视频暂停时触发的事件
    }
  }
}
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}
</style>

3. 增加播放、暂停视频功能

<template>
  <view class="video-container">
    <video ref="video" @play="onPlay" @pause="onPause" @ended="onEnded"></video>
    <view class="controls">
      <button @click="playVideo">播放</button>
      <button @click="pauseVideo">暂停</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      // 视频播放时触发的事件
    },
    onPause() {
      // 视频暂停时触发的事件
    },
    onEnded() {
      // 视频播放结束时触发的事件
    },
    playVideo() {
      this.$refs.video.play()
    },
    pauseVideo() {
      this.$refs.video.pause()
    }
  }
}
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
}
</style>

4. 增加双击点赞

<template>
  <view class="video-container">
    <video ref="video" @play="onPlay" @pause="onPause" @ended="onEnded" @dblclick="onDoubleClick"></video>
    <view class="controls">
      <button @click="playVideo">播放</button>
      <button @click="pauseVideo">暂停</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      // 视频播放时触发的事件
    },
    onPause() {
      // 视频暂停时触发的事件
    },
    onEnded() {
      // 视频播放结束时触发的事件
    },
    onDoubleClick() {
      // 视频双击时触发的事件
    },
    playVideo() {
      this.$refs.video.play()
    },
    pauseVideo() {
      this.$refs.video.pause()
    }
  }
}
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
}
</style>

5. 控制首个视频自动播放

<template>
  <view class="video-container">
    <video ref="video" @play="onPlay" @pause="onPause" @ended="onEnded" autoplay></video>
    <view class="controls">
      <button @click="playVideo">播放</button>
      <button @click="pauseVideo">暂停</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay() {
      // 视频播放时触发的事件
    },
    onPause() {
      // 视频暂停时触发的事件
    },
    onEnded() {
      // 视频播放结束时触发的事件
    },
    playVideo() {
      this.$refs.video.play()
    },
    pauseVideo() {
      this.$refs.video.pause()
    }
  }
}
</script>

<style>
.video-container {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
}
</style>

6. 动态渲染视频信息

<template>
  <view class="video-container">
    <video ref="video" @play="onPlay" @pause="onPause" @ended="onEnded"></video>
    <view class="video-info">
      <view class="video-title">{{ video.title }}</view>
      <view class="video-desc">{{ video.description }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      video: {
        title: '