更新记录

1.0.0（2026-07-08） 下载此版本

• 首次发布。
• 新增 xy-video-player 视频播放器组件。
• 支持标题、封面、尺寸、圆角、阴影、弹幕、全屏、播放控制和常用事件转发。

平台兼容性

uni-app(3.7.13)

uni-app x(3.7.10)

xy-video-player 视频播放器

xy-video-player 是一个基于 uni-app 原生 <video> 封装的视频播放器组件，适合在 H5、App、小程序中快速接入视频播放能力。组件保留原生 video 的常用能力，并额外提供标题区域、样式配置、事件转发和 ref 方法调用。

安装

插件市场安装

1. 在 DCloud 插件市场导入本插件。
2. 确认项目中存在 uni_modules/xy-video-player 目录。
3. 通过 easycom 直接在页面中使用 <xy-video-player />。

本地安装

将整个 xy-video-player 目录复制到项目的 uni_modules 目录下：

uni_modules
└── xy-video-player
    ├── components
    │   └── xy-video-player
    │       └── xy-video-player.vue
    ├── changelog.md
    ├── package.json
    └── readme.md

基础用法

<template>
  <view class="page">
    <xy-video-player
      ref="videoPlayer"
      title="示例视频"
      src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
      poster="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/poster.png"
      height="420rpx"
      radius="20rpx"
      shadow
      @play="onPlay"
      @pause="onPause"
      @ended=""
      @timeupdate=""
      @error="onError"
    />

    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="seek">跳转到 10 秒</button>
  </view>
</template>

<script>
export default {
  methods: {
    play() {
      this.$refs.videoPlayer.play()
    },
    pause() {
      this.$refs.videoPlayer.pause()
    },
    seek() {
      this.$refs.videoPlayer.seek(10)
    },
    onPlay(event) {
      console.log('开始播放', event)
    },
    onPause(event) {
      console.log('暂停播放', event)
    },
    (event) {
      console.log('播放结束', event)
    },
    (event) {
      console.log('播放进度', event.detail.currentTime)
    },
    onError(event) {
      console.log('播放错误', event)
    }
  }
}
</script>

插槽

示例：

<xy-video-player src="视频地址">
  <template #header>
    <view class="custom-header">课程试看</view>
  </template>

  <template #footer>
    <view class="custom-footer">视频简介内容</view>
  </template>
</xy-video-player>

Props

Events

组件会透传 uni-app 原生 video 的常用事件：

Methods

通过 ref 调用：

弹幕示例

<xy-video-player
  ref="videoPlayer"
  src="视频地址"
  :danmu-list="danmuList"
  danmu-btn
  enable-danmu
/>

export default {
  data() {
    return {
      danmuList: [
        {
          text: '第一条弹幕',
          color: '#ffffff',
          time: 1
        }
      ]
    }
  },
  methods: {
    sendDanmu() {
      this.$refs.videoPlayer.sendDanmu({
        text: '新的弹幕',
        color: '#ff0000'
      })
    }
  }
}

注意事项

• 组件基于 uni-app 原生 <video>，不同端对部分属性和方法的支持可能不完全一致，请以 uni-app 官方文档和实际运行端为准。
• 小程序端视频地址建议使用 HTTPS，并确认域名已在小程序后台配置合法域名。
• 自动播放在部分浏览器或小程序端可能受系统策略限制，必要时可配合 muted 使用。
• 如果项目关闭了 easycom，需要在页面或组件内手动引入 uni_modules/xy-video-player/components/xy-video-player/xy-video-player.vue。

发布到插件市场

发布前请检查：

1. package.json 中的 displayName、description、keywords、version 是否符合你的发布信息。
2. dcloudext.contact.qq 可按需填写插件作者联系方式。
3. 在 HBuilderX 中右键 uni_modules/xy-video-player，选择发布到插件市场。