no-framework-video-player

【前端】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