cy-player v1.4.8

说明

• 组件未经过严格测试，出现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参数

自定义事件

自定义插槽

组件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

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

练习作，请见谅