【前端】pc 播放器组件

使用方式

• 1.创建实例

import VideoPlayer from 'no-framework-video-player';
const videoPlayer = new VideoPlayer({
  target: document.getElementById('video'),
  props: {
    // 是否自动播放
    autoPlay: true,
    // 加载动画使用同花顺logo
    loadingType: 'ths',
    // 加载中的文案
    loadingText: '',
    // 视频地址
    src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
  }
});
// 响应式的修改视频播放器的信息
videoPlayer.$$set({
                type: 'm3u8',
                controlBtns: [
                    'progress',
                    'progressTime',
                    'speedRate',
                    'volume',
                    'setting',
                    'pip',
                    'pageFullScreen',
                    'fullScreen',
                ],
                src: 'https://apd-65f952198b079d44ae6259b57f149420.v.smtcdns.com/mv.music.tc.qq.com/Agxi661cQ4dgUk-YYtb57kQOV8qAfhzk9PkGL63aI2Ww/B31668EF2AF834F7B39B8C23AF46A9E333AF1EEB77436A8323B92B4761AC524A14D71B884B41ED1E42D708A610FD2A9EZZqqmusic_default/qmmv_0b53q4aaoaaapeaagbl6yvrvjbyaa6dqab2a.f9944.m3u8'
            })
// 监听视频开始加载
videoPlayer.$on('loadstart', () => {
  console.log('loadstart');
});
// 监听视频播放的当前时间改变
videoPlayer.$on('timeupdate', ({ detail }) => {
  console.log(detail.currentTime, detail.duration);
});

参数说明

| 参数 | 是否必填 | 说明 | 类型 | 默认值 | | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | | projectName | 是 | 记录项目名称，用以统计组件使用情况，并且异常上报的时候做检索用 | string | '' | | src | 是 | 视频源地址 | string | '' | | languageType | 否 | 国际化，目前支持三种语言，简体中文|繁体中文|英文 | 'zh-cn'|'zh-tw'|'en' | 'zh-cn' | | width | 否 | 视频宽度 | string | '800px' | | height | 否 | 视频高度 | string | '450px' | | color | 否 | 播放器整体色彩 | string | '#E93030' | | colorEnd | 否 | 播放器进度条和声音控制栏渐变色彩尾部 | string | '#F06F6F' | | title | 否 | 当前视频的标题，如果传入则会在全屏显示的时候显示在左上角 | string | '' | | type | 否 | 当前视频使用什么类型播放，默认支持 mp4 类型 | 'video/mp4'|'m3u8' | 'video/mp4' | | poster | 否 | 视频封面信息，不传默认使用第一帧视频 | string | '' | | webFullScreen | 否 | 默认是否是网页全屏 | boolean | false | | canSpeed | 否 | 是否支持改变进度 | boolean | true | | currentTime | 否 | 从哪个时间点开始播放，单位是秒 | number | 0 | | muted | 否 | 是否静音 | boolean | false | | speedRate | 否 | 播放倍速 | string[] | ['2.0', '1.5', '1.25', '1.0', '0.75', '0.5'] | | autoPlay | 否 | 是否默认播放，如果设置了 true，如果当前页面没有交互，会静音自动播放 | boolean | false | | loop | 否 | 默认是否循环播放 | boolean | false | | mirror | 否 | 默认是否镜像 | boolean | false | | lightOff | 否 | 默认是否关灯 | boolean | false | | volume | 否 | 默认音量 | number | 1 | | control | 否 | 是否显示控制器 | boolean | false | | controlBtns | 否 | 具体显示某几个控制器,分别为进度条|进度时间|视频质量(mp4 视频不会显示)|速度控制|声音控制|设置|画中画|网页全屏|全屏 | 'progress'|'progressTime'|'quality'|'speedRate'|'volume'|'setting'|'pip'|'pageFullScreen'|'fullScreen'[] | ['progress','progressTime','quality','speedRate','volume','setting','pip','pageFullScreen','fullScreen'] | | preload | 否 | 是否预加载 | 'auto'|'metadata'|'none' | 'auto' | | qualityLevels | 否 | 分辨率数组，mp4 视频不会显示 | string[] | [] | | contextMenu | 否 | 右键弹出内容，滤镜|热键信息|复制网址|版本信息 | 'filter'|'hotkey'|'copy'|'version'[] | ['filter', 'hotkey', 'copy', 'version'] | | loadingDom | 否 | 加载中的 dom，供业务方写自己的 dom 进行渲染 | string | '' | | loadingImg | 否 | 加载中的图片 | string | '' | | loadingType | 否 | 加载中使用的类型。如果业务方需要修改加载中的动画，只能选择一种方式进行修改 | 'ths'|'default' | 'default' | | loadingText | 否 | 加载中的文案 | string | '正在缓冲...' | | hasFeedBack | 否 | 是否需要有反馈入口 | boolean | false |

Events

| 事件名 | 说明 | 参数 | | ----------------- | ------------------------------------------------------------------ | ------------------------------------------------------ | | feedbackConfirm | 反馈弹框点击确认，返回用户反馈选择了什么和他输入了什么反馈内容 | detail:{feedbackOptions:string[],feedbackValue:string} | | speedDisabled | 当设置了不能调整进度用户调整进度时触发，返回用户点击的时间是第几秒 | detail:number | | mirrorChange | 镜像切换触发，返回当前是否打开镜像 | detail:{mirrorStatus:boolean} | | loopChange | 视频循环开启关闭，返回是否开启 | detail:{loopStatus:boolean} | | lightOffChange | 开关灯，返回是否处于开灯状态 | detail:{lightOffStatus:boolean} | | loadstart | 加载开始 | detail:{currentTime:number,duration:number} | | waiting | 等待中 | detail:{currentTime:number,duration:number} | | ended | 播放结束 | detail:{currentTime:number,duration:number} | | error | 播放错误 | detail:{currentTime:number,duration:number} | | stalled | 数据不可用 | detail:{currentTime:number,duration:number} | | progress | 加载资源 | detail:{currentTime:number,duration:number} | | canplay | 视频能够播放 | detail:{videoDom:HTMLVideoElement,duration:number} | | canplaythrough | 视频能够不缓冲播放 | detail:{currentTime:number,duration:number} | | durationchange | 视频长度改变 | detail:{duration:number} | | loadeddata | 视频加载完数据 | detail:{currentTime:number,duration:number} | | loadedmetadata | 视频的元数据已加载 | detail:{currentTime:number,duration:number} | | pause | 暂停 | detail:{currentTime:number,duration:number} | | play | 播放 | detail:{currentTime:number,duration:number} | | playing | 开始播放 | detail:{currentTime:number,duration:number} | | seeked | 当用户已移动/跳跃到视频中的新位置时触发 | detail:{currentTime:number,duration:number} | | seeking | 当用户开始移动/跳跃到视频中的新位置时触发 | detail:{currentTime:number,duration:number} | | timeupdate | 当目前的播放位置已更改时触发 | detail:{currentTime:number,duration:number} | | hlsLevelSwitching | mp4 视频不会触发，清晰度切换开始时触发，返回当前正在切换的清晰度 | detail:number | | hlsLevelSwitched | mp4 视频不会触发，清晰度切换完成时触发，返回当前正在切换的清晰度 | detail:number |