uniapp 小程序视频播放器如何实现？推荐GitHub开源方案

在uniapp开发小程序时，如何实现视频播放器功能？求推荐可靠的GitHub开源方案，最好能支持常见视频格式、自定义控件和全屏播放等功能。目前官方video组件功能有限，想找更完善的解决方案。有没有实际项目用过的大佬分享一下经验？

2 回复

推荐使用 uniapp-video 或 DPlayer 的 uni-app 版本。GitHub 搜索 “uni-app video player” 可找到相关开源项目，如 dcloudio/uni-ui 中的视频组件，简单易用，支持自定义控件和全屏播放。


在 UniApp 中实现小程序视频播放器，推荐使用官方 video 组件结合开源方案优化体验。以下是实现方法和推荐 GitHub 开源项目：

一、基础实现（官方 video 组件）

<template>
  <view>
    <video 
      src="https://example.com/video.mp4"
      controls
      autoplay
      loop
      muted
      :show-fullscreen-btn="true"
      :show-play-btn="true"
      :show-center-play-btn="true"
    ></video>
  </view>
</template>

二、推荐 GitHub 开源方案

  1. MpVideo（强烈推荐）

  2. UniApp 视频组件增强

    • 仓库地址：https://github.com/dcloudio/uni-ui
    • 组件路径：/src/components/uni-video/uni-video.vue
    • 特点：官方维护，兼容多端，支持全屏、进度控制

  3. Vue-Video-Player 适配版

三、自定义播放器实现要点

<template>
  <view class="video-wrapper">
    <video 
      ref="videoRef"
      :src="videoUrl"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeUpdate"
    ></video>
    
    <!-- 自定义控制栏 -->
    <view class="controls">
      <button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
      <slider :value="currentTime" @change="onSeek"/>
    </view>
  </view>
</template>

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

四、注意事项

  1. 小程序平台视频源需配置域名白名单
  2. 安卓端自动播放需用户触发
  3. 使用开源方案时注意查看兼容性说明

推荐首选 MpVideo，它提供了最完整的功能和最佳的小程序兼容性，且文档完善易于集成。

回到顶部