微信小程序 video seek用法

微信小程序的`video`组件提供了一个`seek()`方法，用于让用户手动控制视频播放的位置。这个方法接受一个参数，通常是时间戳（单位为毫秒），表示你想跳转到视频的特定位置开始播放。

以下是基本的用法：

<view>
  <video src="your-video-source.mp4" bind.seek="handleSeek"></video>
</view>

<script>
Page({
  handleSeek(e) {
    // e.detail.value 是用户点击事件触发时传递的新位置
    let timestamp = e.detail.value;
    if (timestamp > 0) { // 确保不会跳到视频之前的位置
      this.setData({ currentTime: timestamp });
    }
  },
})
</script>

在这个例子中，当用户点击视频播放区域，`bind.seek`事件会被触发，`handleSeek`函数会更新视频的当前播放时间。记住要在`setData`方法中更新页面的数据，以便视图能够实时响应新的播放位置。

相关问题

微信小程序的视频播放API

微信小程序的视频播放 API 是 `wx.createVideoContext`。使用这个 API 可以创建一个视频上下文 VideoContext 对象，通过 VideoContext 对象可以控制视频的播放、暂停、停止、跳转等操作。

具体用法如下：

1. 在 wxml 文件中定义视频组件，例如：

   <video id="my-video" src="{{src}}" autoplay></video>

2. 在 js 文件中创建 VideoContext 对象，并获取到视频组件的实例：

   var videoContext = wx.createVideoContext('my-video')

3. 调用 VideoContext 对象的方法来控制视频的播放，例如：

   videoContext.play() // 播放视频
   videoContext.pause() // 暂停视频
   videoContext.seek(time) // 跳转到指定时间播放
   videoContext.stop() // 停止视频播放

需要注意的是，VideoContext 对象只能对当前页面内的 video 组件进行操作，如果需要操作其他页面的 video 组件，需要通过 `wx.navigateTo` 或 `wx.redirectTo` 方法跳转到其他页面，再通过 `wx.createVideoContext` 方法获取到对应的 VideoContext 对象。

微信小程序拖动按帧裁剪视频

微信小程序拖动按帧裁剪视频的具体实现方法如下：

1. 在 wxml 文件中添加 video 组件、两个按钮和一个 canvas 组件，用于渲染拖动进度条。

<video id="myVideo" src="{{src}}" controls></video>
<button type="primary" bindtap="startCutting">开始裁剪</button>
<button type="primary" bindtap="endCutting">结束裁剪</button>
<canvas id="progressCanvas"></canvas>

2. 在 js 文件中监听视频播放事件和按钮的点击事件，并在开始裁剪时记录当前时间，结束裁剪时计算裁剪后的时长。

data: {
  src: '', // 视频地址
  ctx: null, // video 组件的上下文
  duration: 0, // 视频总时长
  startTime: 0, // 裁剪开始时间
  endTime: 0, // 裁剪结束时间
  progressWidth: 0, // 进度条宽度
  progressHeight: 0, // 进度条高度
  progressLeft: 0 // 进度条左边距
},
onLoad() {
  this.ctx = wx.createVideoContext('myVideo', this);
},
onReady() {
  this.ctx.pause(); // 加载后暂停播放
  this.ctx.duration((res) => {
    this.duration = res.duration;
  });
},
onPlay() {
  this.drawProgress(); // 每次播放时绘制进度条
},
startCutting() {
  this.ctx.play(); // 开始播放
  this.startTime = this.ctx.currentTime; // 记录开始时间
},
endCutting() {
  this.ctx.pause(); // 暂停播放
  this.endTime = this.ctx.currentTime; // 记录结束时间
  const cutDuration = this.endTime - this.startTime; // 计算裁剪后的时长
  console.log(`裁剪后的时长为 ${cutDuration}`);
},
drawProgress() {
  const query = wx.createSelectorQuery();
  query.select('#progressCanvas').boundingClientRect((rect) => {
    const canvasWidth = rect.width;
    const canvasHeight = rect.height;
    const progressWidth = canvasWidth * this.ctx.currentTime / this.duration; // 计算进度条宽度
    const progressHeight = canvasHeight;
    const progressLeft = 0;
    const ctx = wx.createCanvasContext('progressCanvas', this);
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清空画布
    ctx.setFillStyle('#f00');
    ctx.fillRect(progressLeft, 0, progressWidth, progressHeight);
    ctx.draw();
    this.progressWidth = progressWidth;
    this.progressHeight = progressHeight;
    this.progressLeft = progressLeft;
  }).exec();
}

3. 在 wxss 文件中设置 canvas 的样式。

canvas {
  width: 100%;
  height: 20rpx;
  background-color: #eee;
}

4. 在 canvas 组件上绑定 touchstart、touchmove 和 touchend 事件，实现拖动进度条的功能。

onProgressTouchStart(e) {
  const touch = e.touches[0];
  this.progressTouchStartX = touch.clientX;
  this.progressTouchStartLeft = this.progressLeft;
},
onProgressTouchMove(e) {
  const touch = e.touches[0];
  const distanceX = touch.clientX - this.progressTouchStartX;
  const progressLeft = this.progressTouchStartLeft + distanceX;
  if (progressLeft < 0) {
    this.progressLeft = 0;
  } else if (progressLeft > this.progressWidth) {
    this.progressLeft = this.progressWidth;
  } else {
    this.progressLeft = progressLeft;
  }
  this.updateProgress();
},
onProgressTouchEnd(e) {
  this.ctx.seek(this.duration * this.progressLeft / this.progressWidth); // 根据进度条位置跳转视频播放进度
},
updateProgress() {
  const ctx = wx.createCanvasContext('progressCanvas', this);
  ctx.clearRect(0, 0, this.progressWidth, this.progressHeight); // 清空画布
  ctx.setFillStyle('#f00');
  ctx.fillRect(this.progressLeft, 0, this.progressWidth - this.progressLeft, this.progressHeight);
  ctx.draw(true);
}

注意：拖动进度条时需要记录开始触摸时的位置和进度条的左边距，然后根据移动距离计算进度条的位置，最后根据进度条位置跳转视频播放进度。由于视频播放的精度可能不够，裁剪时可能会有一些误差。如果需要更精确的裁剪，可以使用一些第三方的视频处理库。