上下滑动视频，玩转uni-app视频播放新姿势

uni-app视频播放的秘密武器：上下滑动播放

在移动端，视频播放是用户最常见的交互之一。uni-app提供了一个原生video组件，用于播放视频。但是，如果你想让视频播放更加有趣和交互性，不妨试试上下滑动播放。

什么是上下滑动播放？

上下滑动播放顾名思义，就是用户通过上下滑动屏幕来控制视频的播放。当用户向下滑动时，视频播放速率加快；当用户向上滑动时，视频播放速率减慢或暂停。这种交互方式让用户可以轻松控制视频播放节奏，带来更沉浸式的观看体验。

如何实现上下滑动播放？

在uni-app中实现上下滑动播放非常简单，只需要三个步骤：

1. 引入video组件

在你的页面中引入video组件：

<video
  src="http://xxx.xxx.xxx/video.mp4"
  width="300px"
  height="200px"
/>

2. 添加上下滑动事件

在onLoad生命周期方法中，为video组件添加上下滑动事件：

onLoad() {
  const video = uni.createSelectorQuery().select('#video');
  video.on('touchstart', (e) => {
    this.startY = e.touches[0].clientY;
  })
  video.on('touchend', (e) => {
    this.endY = e.changedTouches[0].clientY;
    const deltaY = this.endY - this.startY;
    if (deltaY > 100) {
      this.video.playbackRate = 1.5;
      this.video.play();
    } else if (deltaY < -100) {
      this.video.pause();
    }
  })
}

3. 控制视频播放速率

在上下滑动事件回调函数中，根据Y坐标的差值控制视频的播放速率：

if (deltaY > 100) {
  this.video.playbackRate = 1.5;
  this.video.play();
} else if (deltaY < -100) {
  this.video.pause();
}

总结

通过这三个简单的步骤，你就可以在uni-app小程序中实现上下滑动播放视频的功能。这种交互方式可以提升用户体验，让视频播放更加有趣和交互性。

常见问题解答

• 如何更改上下滑动距离阈值？

你可以通过更改deltaY的阈值来更改上下滑动距离阈值。例如，你可以将阈值更改为50px：

if (deltaY > 50) {
  this.video.playbackRate = 1.5;
  this.video.play();
} else if (deltaY < -50) {
  this.video.pause();
}

• 如何让视频在滑动停止后继续播放？

你可以使用setTimeout函数来让视频在滑动停止后继续播放：

setTimeout(() => {
  this.video.play();
}, 1000);

• 如何实现更平滑的上下滑动效果？

你可以使用requestAnimationFrame函数来实现更平滑的上下滑动效果：

let lastTime = 0;
const requestId = requestAnimationFrame(function(timestamp) {
  const progress = timestamp - lastTime;
  if (progress >= 16) {
    lastTime = timestamp;
    // 更新视频播放速率
  }
  requestId = requestAnimationFrame(callback);
});

• 如何防止上下滑动与其他手势冲突？

你可以使用stopPropagation函数来防止上下滑动与其他手势冲突：

video.on('touchstart', (e) => {
  e.stopPropagation();
})

• 如何禁用上下滑动播放？

如果你不需要上下滑动播放，可以在onLoad生命周期方法中移除上下滑动事件监听器：

video.off('touchstart')
video.off('touchend')