@no-framework/videoplayer

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i @no-framework/videoplayer

Weekly Downloads

1

Version

1.0.0

License

none

Unpacked Size

1.79 MB

Total Files

39

Last publish

Collaborators

  • wangjian27