uni-app 迅课视频播放器插件讨论 长按倍数功能

在uni-app中实现长按倍数功能，可以通过结合触摸事件（touchstart、touchmove、touchend）和定时器来实现。以下是一个简化的代码示例，展示如何在迅课视频播放器插件中实现长按倍数调整功能。

首先，确保你已经集成了迅课视频播放器插件，并有一个视频播放页面。

视频播放页面代码示例

<template>
  <view class="container">
    <xuke-video-player
      ref="videoPlayer"
      :src="videoSrc"
      controls
      @ready="onPlayerReady"
    />
    <view class="speed-control" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      {{ playSpeed }}x
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
      playSpeed: 1.0,
      speedChangeInterval: null,
      lastTime: 0,
      isChangingSpeed: false,
    };
  },
  methods: {
    onPlayerReady(player) {
      this.player = player;
    },
    onTouchStart(event) {
      this.lastTime = Date.now();
      this.isChangingSpeed = true;
    },
    onTouchMove(event) {
      if (!this.isChangingSpeed) return;
      
      const currentTime = Date.now();
      const deltaTime = currentTime - this.lastTime;
      this.lastTime = currentTime;
      
      const speedChangeRate = 0.1; // 每秒增加/减少0.1倍速
      let newSpeed = this.playSpeed + (deltaTime / 1000) * speedChangeRate;
      
      // 限制速度范围
      newSpeed = Math.max(0.5, Math.min(newSpeed, 2.0));
      
      this.playSpeed = newSpeed.toFixed(1); // 保留一位小数
      this.player.setPlaySpeed(parseFloat(this.playSpeed));
    },
    onTouchEnd() {
      this.isChangingSpeed = false;
      if (this.speedChangeInterval) {
        clearInterval(this.speedChangeInterval);
        this.speedChangeInterval = null;
      }
    },
  },
};
</script>

<style>
.container {
  position: relative;
}
.speed-control {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
}
</style>

说明

1. 模板部分：包含一个迅课视频播放器组件和一个显示当前播放倍数的视图。
2. 数据部分：定义了视频源、当前播放倍数、定时器、上次触摸时间和是否正在改变速度的标志。
3. 方法部分：
   • onPlayerReady：播放器就绪时保存播放器实例。
   • onTouchStart：记录触摸开始时间，并设置改变速度的标志。
   • onTouchMove：根据触摸移动的时间差计算新的播放倍数，并更新播放器的播放速度。
   • onTouchEnd：停止改变速度。

这个示例提供了一个基本框架，你可以根据实际需求进行调整，比如增加平滑过渡效果、优化触摸事件的响应等。