uniapp如何实现自定义video播放器

在uniapp中如何实现自定义video播放器？官方提供的video组件功能有限，想实现自定义的播放暂停按钮、进度条、全屏控制等功能。有没有比较成熟的方案或者插件推荐？另外，在自定义过程中需要注意哪些兼容性问题，特别是在不同平台（iOS/Android/小程序）上的表现差异？

2 回复

uniapp可通过video组件实现自定义播放器。使用controls属性隐藏原生控件，再结合cover-view覆盖自定义按钮，通过video实例控制播放、暂停等功能。


在 UniApp 中实现自定义 video 播放器，主要通过以下步骤完成：

1. 使用 <video> 组件

UniApp 的 <video> 组件支持自定义控制栏，通过设置 controls 属性为 false 来隐藏默认控制栏，然后自定义 UI 控制播放。

示例代码：

<template>
  <view>
    <video 
      :src="videoSrc" 
      :controls="false" 
      ref="videoPlayer"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
    ></video>
    
    <!-- 自定义控制栏 -->
    <view class="custom-controls">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <text>{{ currentTime }} / {{ duration }}</text>
      <slider :value="currentTime" :max="duration" @change="onSeek" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4',
      isPlaying: false,
      currentTime: 0,
      duration: 0
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer;
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    },
    onTimeUpdate(e) {
      this.currentTime = e.detail.currentTime;
    },
    onLoadedMetadata(e) {
      this.duration = e.detail.duration;
    },
    onSeek(e) {
      this.$refs.videoPlayer.seek(e.detail.value);
    }
  }
};
</script>

<style>
.custom-controls {
  display: flex;
  align-items: center;
  padding: 10px;
}
</style>

2. 关键点说明

  • 隐藏默认控制栏：设置 controls="false"。
  • 引用视频组件：使用 ref 获取视频实例，调用 play()、pause()、seek() 等方法。
  • 监听事件：如 play、pause、timeupdate、loadedmetadata 来更新状态。
  • 自定义 UI：通过按钮、滑块等组件实现播放、暂停、进度控制。

3. 扩展功能

  • 全屏控制：使用 video 组件的 requestFullScreen 和 exitFullScreen 方法。
  • 手势操作：可通过 touch 事件实现滑动调节音量/亮度。
  • 自定义样式：根据需求设计控制栏布局和主题。

注意事项

  • 测试时确保视频源可访问，支持跨域。
  • 不同平台（如 iOS、Android）可能存在兼容性差异，需真机测试。

通过以上方法，你可以灵活实现符合需求的自定义视频播放器。

回到顶部