- 安装
npm install xgplayer
效果为
- 页面使用
<div id="myXgVideo" />
import Player from 'xgplayer'
mounted () {
this.handleXgplayer()
},
// 西瓜视频
handleXgplayer () {
const player = new Player({
id: 'myXgVideo',
width: 700, // 宽度
height: 337.5, // 高度
volume: 0.6, // 音量
autoplay: false, // 自动波发放
loop: true, // 循环播放
videoInit: true, // 初始化显示视频首帧
playbackRate: [0.5, 0.75, 1, 1.5, 2], // 倍速播放
defaultPlaybackRate: 1, // 设置初始速度
lastPlayTime: 20, // 视频起播时间（单位：秒）
lastPlayTimeHideDelay: 5, // 提示文字展示时长（单位：秒）
rotate: { // 视频旋转按钮配置项
innerRotate: true, // 只旋转内部video
clockwise: false // 旋转方向是否为顺时针
},
download: true, // 设置download控件显示
// 用户将鼠标指针移动到进度条某处时进度条上方会出现该时刻的视频预览图，服务端提供sprite图(由多张视频预览小图组成)作为预览图资源。
thumbnail: {
pic_num: 44,
width: 160,
height: 90,
col: 10,
row: 10,
urls: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'],
isShowCoverPreview: false
},
// 视频跳转播放下一集，需提供视频资源列表
playNext: {
urlList: [
'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
]
},
poster: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', // 首屏页面
url: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
pip: true, // 画中画
// 迷你播放器
miniplayer: true,
miniplayerConfig: {
bottom: 200,
right: 0,
width: 320,
height: 180
},
// 网页样式全屏
cssFullscreen: true,
// 截图
screenShot: {
saveImg: true,
quality: 0.92,
type: 'image/png',
format: '.png'
},
// 弹幕
danmu: {
comments: [ // 弹幕数组
{
duration: 15000, // 弹幕持续显示时间,毫秒(最低为5000毫秒)
id: '1', // 弹幕id，需唯一
start: 3000, // 弹幕出现时间，毫秒
prior: true, // 该条弹幕优先显示，默认false
color: true, // 该条弹幕为彩色弹幕，默认false
txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', // 弹幕文字内容
style: { // 弹幕自定义样式
color: '#ff9500',
fontSize: '20px',
border: 'solid 1px #ff9500',
borderRadius: '50px',
padding: '5px 11px',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
},
mode: 'top' // 显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
// el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt
// eventListeners: [{ //支持自定义DOM设置DOM监听事件
// event: 'click',
// listener: function (e) {
// console.log('click')
// },
// useCapture: false,
// }]
}
],
area: { // 弹幕显示区域
start: 0, // 区域顶部到播放器顶部所占播放器高度的比例
end: 1 // 区域底部到播放器顶部所占播放器高度的比例
},
closeDefaultBtn: true, // 开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
defaultOff: true, // 开启此项后弹幕不会初始化，默认初始化弹幕
// 可通过该配置项开启键盘快捷键：按 → 键快进10秒， 按 ← 键后退10秒，按 ↑ 键调高音量，按 ↓ 键调低音量，按 space 键切换播放/暂停状态
keyShortcut: 'on',
keyShortcutStep: { // 设置调整步长
currentTime: 15, // 播放进度调整步长，默认10秒
volume: 0.2 // 音量调整步长，默认0.1
},
// 自定义错误提示
errorTips: `请<span>刷新</span>试试`,
// 清晰度切换配置
definitionActive: 'click'
}
})
// 旋转
player.on('rotate', function (deg) {
console.log(deg)// 旋转时会触发rotate事件，角度有四个值90，180，270，0
})
// 清晰度切换配置
player.emit('resourceReady', [{ name: '高清', url: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4' }, { name: '超清', url: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4' }])
}
完结散花...
