更新记录

1.1.1（2025-08-01）

增加了长按屏幕进行1.5倍快进效果

1.1.0（2025-08-01）

增加了插槽功能，分别上右下左，header、right、bottom、left

平台兼容性

uni-app x(4.66)

其他

xudy-player.uvue 组件文档

概述

xudy-player.uvue 是一个基于 UniApp UVue 的视频播放器组件，提供了丰富的视频播放功能和灵活的插槽系统，适用于多种视频播放场景。

功能特性

• 支持视频播放、暂停、进度控制
• 支持全屏播放
• 支持静音功能
• 支持视频时长格式化显示
• 提供多个插槽位置（header、footer、left、right）
• 支持自定义控制条
• 支持触摸控制（点击播放/暂停）
• 响应式设计，适应不同屏幕尺寸

组件结构

graph TD
    A[video-player-container] --> B[video-slot-header]
    A --> C[video-slot-right]
    A --> D[video-slot-left]
    A --> E[video元素]
    A --> F[video-mask]
    A --> G[video-controller]
    A --> H[video-slot-footer]

详细说明

Props 配置

插槽系统

组件提供了4个插槽位置：

1. header插槽 - 位于视频顶部
2. footer插槽 - 位于视频底部，控制条上方
3. left插槽 - 位于视频左侧，占宽15%
4. right插槽 - 位于视频右侧，占宽15%

插槽使用示例：

<xudy-player src="video.mp4">
  <template #header>
    <view>自定义顶部内容</view>
  </template>
  <template #footer>
    <view>自定义底部内容</view>
  </template>
</xudy-player>

事件系统

组件通过emit触发以下事件：

方法

通过ref可以调用以下方法：

1. play() - 播放视频
2. pause() - 暂停视频
3. seek(time) - 跳转到指定时间
4. requestFullScreen(options) - 进入全屏
5. exitFullScreen() - 退出全屏
6. playbackRate(rate) - 设置播放速度

使用示例

<template>
  <xudy-player 
    src="https://example.com/video.mp4"
    poster="https://example.com/poster.jpg"
    :autoPlay="true"
    @play="onPlay"
    @pause="onPause"
  >
    <template #header>
      <view class="custom-header">视频标题</view>
    </template>
  </xudy-player>
</template>

<script setup>
  const onPlay = () => {
    console.log('视频开始播放');
  };

  const onPause = () => {
    console.log('视频暂停');
  };
</script>

<style>
  .custom-header {
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 10px;
  }
</style>

<template>
  <xudy-player 
    ref="videoPlayer"
    src="https://example.com/video.mp4"
    poster="https://example.com/poster.jpg"
    title="演示视频"
    :loop="true"
    @play="onPlay"
    @pause="onPause"
    @fullscreenchange=""
  >
    <template #header>
      <view class="custom-header" @click="goBack">
        <text>← 返回</text>
      </view>
    </template>

    <template #footer>
      <view class="video-meta">
        <text class="title">{{ videoTitle }}</text>
        <text class="views">播放量: {{ viewCount }}次</text>
      </view>
    </template>

    <template #right>
      <view class="side-buttons">
        <view class="side-button" @click="toggleLike">
          <text>{{ isLiked ? '❤️' : '' }}</text>
        </view>
        <view class="side-button" @click="share">
          <text>↗️</text>
        </view>
      </view>
    </template>
  </xudy-player>
</template>

<script setup>
import { ref } from 'vue';

const videoPlayer = ref(null);
const videoTitle = ref('示例视频标题');
const viewCount = ref(1024);
const isLiked = ref(false);

const onPlay = () => {
  console.log('视频开始播放');
};

const onPause = () => {
  console.log('视频暂停');
};

const  = (e) => {
  console.log('全屏状态:', e.detail.fullScreen);
};

const goBack = () => {
  uni.navigateBack();
};

const toggleLike = () => {
  isLiked.value = !isLiked.value;
};

const share = () => {
  uni.share({
    provider: 'weixin',
    type: 0,
    title: '分享视频',
    href: 'https://example.com'
  });
};
</script>

<style>
.custom-header {
  padding: 20rpx;
  background: rgba(0,0,0,0.5);
  color: white;
}

.video-meta {
  padding: 20rpx;
  background: rgba(0,0,0,0.5);
  color: white;
}

.side-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rpx;
}

.side-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 40rpx;
}
</style>

注意事项

1. 视频组件在某些平台上可能有特殊限制，请参考UniApp文档
2. 全屏功能在不同平台上表现可能不一致
3. 插槽内容会覆盖在视频上方，注意不要遮挡重要控制元素
4. 组件内部已经处理了事件冒泡，无需额外处理

扩展建议

1. 可以增加播放速率控制面板
2. 可以增加画中画功能
3. 可以增加清晰度切换功能
4. 可以增加弹幕功能

这个组件提供了良好的基础功能，可以根据实际需求进行进一步扩展和定制。