uni-app video组件及其API支持自定义倍速、自定义控制栏

在uni-app中，video组件提供了视频播放的基础功能，但原生并不直接支持自定义倍速和自定义控制栏。不过，我们可以通过结合JavaScript和CSS来实现这些功能。以下是一个示例，展示如何自定义倍速和自定义控制栏。

1. 自定义倍速

要实现自定义倍速，我们需要使用video组件的playbackRate属性，并通过按钮来动态调整该属性。

<template>
  <view class="container">
    <video
      id="videoPlayer"
      src="path/to/your/video.mp4"
      controls="false"
      autoplay="true"
      @loadedmetadata="onLoadedMetadata"
    ></video>
    <view class="controls">
      <button @click="changeSpeed(0.5)">0.5x</button>
      <button @click="changeSpeed(1)">1x</button>
      <button @click="changeSpeed(1.5)">1.5x</button>
      <button @click="changeSpeed(2)">2x</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    onLoadedMetadata() {
      this.videoPlayer = document.getElementById('videoPlayer');
    },
    changeSpeed(rate) {
      this.videoPlayer.playbackRate = rate;
    }
  }
}
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
button {
  margin: 0 5px;
}
</style>

2. 自定义控制栏

要实现自定义控制栏，我们可以完全隐藏原生的控制栏（通过设置controls="false"），然后手动创建播放、暂停、进度条等控件。

<template>
  <view class="container">
    <video
      id="videoPlayer"
      src="path/to/your/video.mp4"
      controls="false"
      autoplay="true"
      @loadedmetadata="onLoadedMetadata"
    ></video>
    <view class="custom-controls">
      <button @click="togglePlay">Play/Pause</button>
      <slider
        :min="0"
        :max="videoDuration"
        v-model="currentTime"
        @change="seekTo"
      ></slider>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoPlayer: null,
      videoDuration: 0,
      currentTime: 0
    };
  },
  methods: {
    onLoadedMetadata() {
      this.videoPlayer = document.getElementById('videoPlayer');
      this.videoDuration = this.videoPlayer.duration;
    },
    togglePlay() {
      if (this.videoPlayer.paused) {
        this.videoPlayer.play();
      } else {
        this.videoPlayer.pause();
      }
    },
    seekTo(e) {
      this.videoPlayer.currentTime = e.detail.value;
    }
  }
}
</script>

上述代码展示了如何通过uni-app的video组件和JavaScript结合实现自定义倍速和自定义控制栏。注意，实际项目中可能需要更多的样式调整和逻辑处理，例如处理视频加载状态、进度条样式优化等。