说明

• 组件未经过严格测试，出现bug请及时反馈~
• 组件使用Typescript和Vue3进行开发，代码逻辑比较清晰注释完善，如有需要可以自己拿来定制开发~
• 参考了部分JoL-Player实现和功能，沿用了一些其中的素材，如果喜欢也请支持一下他~
• 该组件如果对你有帮助请点一个⭐，如果有需要的其他功能请反馈~
• Vue2版本见：Cy-Player-Vue2

特性

• 支持Vue3.0+版本，支持响应式参数传递
• 使用Typescript开发，提供完整类型定义
• 支持PC、移动端使用（新增移动端左右滑动快进，上下滑动修改音量），支持视频自适应缩放，支持自定义插槽和自定义回调函数
• 支持HLS(application/x-mpegurl,application/vnd.apple.mpegurl)以及H264(video/mp4,video/ogg,video/webm)格式的视频播放

安装

npm

npm install cy-player --save

yarn

yarn add cy-player 

示例

<script setup lang="ts">
import 'cy-player';
import {PlayerOption} from 'cy-player'
import {reactive} from 'vue';
// 响应式option
const option = reactive<PlayerOption>({
  videoSrc:
    'https://cdn.pixabay.com/video/2024/03/31/206294_small.mp4?download',
});
const onPlay = (e)=>{console.log(e)}
</script>
<template>
  <cy-player :option="option" @play="onPlay"/>
</template>

文档

组件option参数

| 参数 | 说明 | 类型 | 默认值 | | ----------------------- | ------------------------------------------------------------ | ------------------ | ----------------- | | videoSrc | 视频地址（必传） | string | 必传 | | sourceType | 源视频格式，选择auto需要源视频的跨域支持 | SourceType | h264 | | themeColor | 播放器主题颜色 | string | #00aeec | | styles | 容器元素样式 | CSSProperties | - | | controllerStyles | 控制器根样式 | CSSProperties | - | | height | 容器元素高度 | string \| number | 根据video元素计算 | | width | 容器元素宽度 | string \| number | 根据video元素计算 | | videoAutoFix | video尺寸自适应，根据video本身加载的视频尺寸比例以及容器元素尺寸比例自动计算video元素在容器元素中的位置和大小；例如在一个较宽的容器中播放一个较窄的视频，即容器元素宽高比 > video元素宽高比时video元素占满整个容器的高度，宽度按照video加载的视频比例计算。 | boolean | true | | poster | 视频封面 | string | - | | showToast | 是否显示Toast提示（不支持响应式） | boolean | true | | keepControllerShow | 是否始终显示控制器 | boolean | false | | isSettingShow | 是否显示setting按钮 | boolean | true | | isPicInPicShow | 是否显示画中画按钮 | boolean | true | | isWebScreenFullShow | 是否显示网页全屏按钮 | boolean | true | | isScreenFullShow | 是否显示全屏按钮 | boolean | true | | isMultiplePlayShow | 是否显示倍速播放按钮 | boolean | true | | showProgressFloat | 是否显示悬浮进度条（controller隐藏后的进度条） | boolean | true | | toastPlacement | Toast显示位置 | Position | left-top | | customizedItemPlacement | 自定义组件(customized插槽)在屏幕上的位置 | Position | center | | maskIconPlacement | 遮罩图标位置（也是暂停、重播等自定义插槽的位置） | Position | center | | quality | 播放器清晰度列表，如果不指定则不显示清晰度切换按钮，chosen为true时初始化默认加载该视频 | QualityOption[] | - |

自定义事件

| 事件名称 | 说明 | 类型 | | ------------------- | -------------------------------------------------------- | ------------------------------------------------------------ | | play | 视频开始播放时回调 | (arg: VideoState): void | | pause | 视频停止播放时回调 | (arg: VideoState): void | | playEnd | 视频播放结束时回调 | (arg: VideoState): void | | waiting | 视频处于waiting事件时回调 | (arg: VideoState): void | | timeChange | 视频播放事件更新时回调 | (arg: VideoState): void | | volumeChange | 视频音量更改时回调 | (arg: VideoState): void | | error | 视频触发error事件时回调 | (): void | | qualityChange | 视频质量切换时回调 | (quality: VideoQuality): void | | playerMounted | 组件加载时onMounted中执行回调 | (videoElement: HTMLVideoElement, containerElement: HTMLDivElement) => void | | playerBeforeUnmount | 组件卸载时onBeforeUnmount中执行回调 | (videoElement: HTMLVideoElement, containerElement: HTMLDivElement) => void | | progressMouseDown | 进度条触发mousedown或touchstart回调 | (arg: VideoState): void | | progressMouseMove | 进度条处于拖拽状态时全局触发mousemove或touchmove回调 | (arg: VideoState): void | | progressMouseUp | 进度条处于拖拽状态时全局触发mouseup或touchend回调 | (arg: VideoState): void |

自定义插槽

| 插槽名 | 说明 | | ---------- | ------------------------------------------------------------ | | customized | 自定义界面组件，可通过customizedItemPlacement配置项配置其在根容器中的位置 | | slider | 自定义进度条拖动滑块 | | playend | 自定义播放结束时遮罩组件（会替换默认的播放结束遮罩） | | waiting | 自定义waiting事件遮罩组件（会替换默认的等待时遮罩） | | paused | 自定义暂停时遮罩组件（会替换默认的暂停时遮罩） | | error | 自定义error事件触发时组件（会替换默认的视频加载错误时遮罩） |

组件ref

示例

<script setup lang='ts'>
import {ref} from 'vue';
import {CyPlayerRef,CyPlayer} from 'cy-player';
const playerRef = ref<CyPlayerRef>();
const handleSetCurTime = () => {
    playerRef.value!.controller.setCurTime(5);
    console.log(playerRef.value!.states)
    console.log(playerRef.value!.videoElement)
}
</script>
<template>
  <CyPlayer ref="playerRef" :option="{src:''}"></CyPlayer>
  <button @click="handleSetCurTime">Click</button>
</template>

Controller

| 名称 | 说明 | 类型 | | ----------- | ---------------------------------------- | ------------------------- | | load | HTMLVideoElement.load | () => void | | play | HTMLVideoElement.play | () => void | | pause | HTMLVideoElement.pause | () => void | | setVolume | 设置音量，volume参数值范围为0-100 | (volume: number) => void | | setCurTime | 设置当前播放时间 | (curTime: number) => void | | setVideoSrc | 设置video元素的src（会触发重新更新加载） | (src: string) => void |

ref接口

// ref接口
export type CyPlayerRef = {
  states: VideoState;
  controller: VideoController;
  videoElement: HTMLVideoElement;
  showToast: (message: string) => void;
  closeToast: () => void;
};

部分接口

// 视频种类
export type SourceType = 'h264' | 'hls' | 'auto';

// 视频清晰度选项
export type VideoQuality =
  | '360p'
  | '480p'
  | '720p'
  | '1080p'
  | '2K'
  | '4K'
  | '8K';

// 位置选项
export type Position =
  | 'left-top'
  | 'right-top'
  | 'left-bottom'
  | 'right-bottom'
  | 'center';

// quality选项
export interface QualityOption {
  vQ: VideoQuality;
  src: string;
  chosen?: boolean;
}

// Video状态
export interface VideoState<T = number, U = boolean, K = string> {
  /**
   * @description 是否播放
   */
  isPlay: U;
  /**
   * @description 当前播放时间/s
   */
  currentPlayTime: T;
  /**
   * @description 总时长/s
   */
  duration: T;
  /**
   * @description 缓存时长/s
   */
  bufferedTime: T;
  /**
   * @description 音量(0-100)
   */
  volume: T;

  /**
   * @description 是否结束
   */
  isPlayEnd: U;
  /**
   * @description 视频播放过程中的waiting事件触发
   */
  isWaiting: U;
  /**
   * @description 视频是否循环播放
   */
  isLoop: U;
  /**
   * @description 当前src
   */
  curSrc: K;
  /**
   * @description 是否错误
   */
  isError: U;
  /**
   * @description 当前video自己的宽度
   */
  videoWidth: T;
  /**
   * @description 当前video自己的宽度
   */
  videoHeight: T;
}

Tips

练习作，请见谅