POLYV WEB移动端播放器控制栏

Overview

纯js支持的移动端播放控制栏皮肤，包含播放、暂停、播放进度栏、时间显示、全屏、倍速、清晰度等按钮或选择面板。依赖额外的video组件属性更新状态，并且会回调事件供操作video组件。

Installation

npm i @polyv/web-player-skin -S

How to use

import PolyvSkin from '@polyv/web-player-skin';

const skin = new PolyvSkin({
    el: document.querySelector('.control'), // 控制栏父容器
    level: 0,
    levels: 3
});

API

Params

level

默认清晰度

参数类型：Number

取值范围：0 ~ 3

0 自动 1流畅 2高清 3超清

levels

可选清晰度长度，默认会有自动

参数类型：Number

取值范围：1~3

3表示包含自动、流畅、高清、超清3个清晰度可选

isLive

直播模式

参数类型：Boolean

直播模式下，不显示进度条和时间显示块

stayFullState

保持全屏按钮状态

参数类型：Boolean

保持仅显示全屏按钮，点击按钮后不显示普屏按钮，事件触发正常

showRate

显示倍速按钮

参数类型：Boolean

默认显示，设置为fals则不显示

showHd

显示码率按钮

参数类型：Boolean

默认显示，设置为fals则不显示

autoHd

是否显示自动码率

参数类型：Boolean

默认显示，设置为fals则不显示

showAudioBtn

显示音频模式按钮

参数类型：Boolean

默认不显示，设置为true则显示

showDanmu

显示弹幕按钮

参数类型：Boolean

默认不显示，设置为true则显示

danmuInitState

弹幕按钮是否为选中状态

参数类型：Boolean

默认选中，设置为fals则为非选中状态

Function

• durationUpdate

/**
* 更新总时长显示
* @param duration Number
*/
durationUpdate(duration) // skin.durationUpdate(1880);

• timeUpdate

/**
* 更新当前播放时间点
* @param time Number
*/
timeUpdate(time) // skin.timeUpdate(10);

• changePlayState

/**
* 更改播放按钮状态
* @param isToPlay Boolean
*/
changePlayState(isToPlay) // skin.changePlayState(true); // 显示为播放中状态

• changeRefreshState

/**
* 更改刷新按钮状态
* @param isShow Boolean
*/
changeRefreshState(isShow) // skin.changeRefreshState(true); // 显示刷新按钮

• changeSettingState

/**
* 更改刷新按钮状态
* @param isShow Boolean
*/
changeSettingState(isShow) // skin.changeSettingState(true); // 显示设置按钮

• changeLevel

 /**
 * 清晰度变化
 * @param index Number
 */
 changeLevel(index) // skin.changeLevel(2); // 高亮超清选项

• showLight

 /**
 * 亮度变化
 * @param num Number 范围0~100
 */
 showLight(num) // skin.showLight(80); // 弹窗显示亮度为80%

• showLight

 /**
 * 音量变化
 * @param num Number 范围0~1
 */
 showVolume(num) // skin.showVolume(0.5); // 音量条显示为50%

• showSeekTime

/**
* 快进退时间变化
* @param time Number
*/
showSeekTime(time) // skin.showSeekTime(50); // 弹窗显示拖拽进度为50秒

• showSafeArea

/**
* 显示安全区域
* @param isShow Boolean
*/
showSafeArea(isShow) // skin.showSafeArea(true); // 显示安全区域34px

• addGesture

/**
* 手势监听
* @param isAdd Boolean
*/
addGesture(isAdd) // skin.addGesture(true); // 设置true才会触发LEFT_UP等手势监听事件

Event

• PLAY_BTN_CLICKED

// 播放|暂停按钮是否被点击
skin.on('PLAY_BTN_CLICKED', (isToPlay) => {
	isToPlay ? video.play() : video.pause();
});	

• FULL_BTN_CLICKED

// 进入全屏|退出全屏按钮是否被点击
skin.on('FULL_BTN_CLICKED', (isToFull) => {
	console.log('>>> 是否点击全屏:', isToFull);
});	

• PROGRESS_DRAG_END

// 拖拽进度条进行跳跃播放
skin.on('PROGRESS_DRAG_END', (toSeekTime) => {
   video.currentTime = toSeekTime;
});

• RATE_CHANGED

// 倍速按钮点击
skin.on('RATE_CHANGED', (rate) => {
	console.log('>>> 倍速变化:', rate);
	video.playbackRate = rate;
});

• HD_CHANGED

// 清晰度按钮点击
skin.on('HD_CHANGED', (level) => {
	console.log('>>> 清晰度变化：', level);
});

• LEFT_UP

// 手势操作，左半部分区域上滑
skin.on('LEFT_UP', () => {
	console.log('>>>亮度调亮');
});

• LEFT_DOWN

// 手势操作，左半部分区域下滑
skin.on('LEFT_DOWN', () => {
	console.log('>>>亮度调暗');
});

• RIGHT_UP

// 手势操作，右半部分区域上滑
skin.on('RIGHT_UP', () => {
	console.log('>>>音量调高');
});

• RIGHT_DOWN

// 手势操作，右半部分区域下滑
skin.on('RIGHT_DOWN', () => {
	console.log('>>>音量调低');
});

• SEEK_TO

// 手势操作，进行播放进度跳跃
skin.on('SEEK_TO', () => {
	console.log('>>>拖拽播放:', time);
  video.currentTime = time;
});

• SCREEN_SHOT

// 点击截图按钮
skin.on('SCREEN_SHOT', () => {
	console.log('>>> 点击截图按钮');
});

• DANMU_BTN_CLICKED

// 点击弹幕按钮
skin.on('DANMU_BTN_CLICKED', (isShow) => {
	console.log('>>> 弹幕按钮是否选中状态:', isShow);
});

Features

• ie >= 9