🎉 新增视频播放器组件 scVideo
This commit is contained in:
sakuya
parent
d28438f18f
commit
4dd61edc99
|
|
@ -23,7 +23,9 @@
|
|||
"vue-i18n": "9.1.9",
|
||||
"vue-router": "4.0.12",
|
||||
"vuedraggable": "4.0.3",
|
||||
"vuex": "4.0.2"
|
||||
"vuex": "4.0.2",
|
||||
"xgplayer": "2.31.3",
|
||||
"xgplayer-hls": "2.4.32-3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.5.15",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<!--
|
||||
* @Descripttion: xgplayer二次封装
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月29日12:10:06
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="sc-video" ref="scVideo"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Player from 'xgplayer'
|
||||
import HlsPlayer from 'xgplayer-hls'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
//视频路径
|
||||
src: { type: String, required: true, default: "" },
|
||||
//封面
|
||||
poster: { type: String, default: "" },
|
||||
//音量
|
||||
volume: { type: Number, default: 0.8 },
|
||||
//是否显示控制
|
||||
controls: { type: Boolean, default: true },
|
||||
//是否直播场景
|
||||
isLive: { type: Boolean, default: false },
|
||||
//自动播放
|
||||
autoplay: { type: Boolean, default: false },
|
||||
//循环播放
|
||||
loop: { type: Boolean, default: false },
|
||||
//初始化显示首帧
|
||||
videoInit: { type: Boolean, default: false },
|
||||
//画中画
|
||||
pip: { type: Boolean, default: false },
|
||||
//倍速播放
|
||||
playbackRate: { type: [Array, String], default: () => [0.5, 0.75, 1, 1.5, 2] },
|
||||
//记忆播放
|
||||
lastPlayTime: { type: Number, default: 0 },
|
||||
//弹幕
|
||||
danmu: { type: [Array, String], default: "" },
|
||||
//源切换
|
||||
resource: { type: Array, default: () => [] },
|
||||
//进度条特殊点标记
|
||||
progressDot: { type: Array, default: () => [] },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.isLive){
|
||||
this.initHls()
|
||||
}else{
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.player = new Player({
|
||||
el: this.$refs.scVideo,
|
||||
url: this.src,
|
||||
fluid: true,
|
||||
poster: this.poster,
|
||||
lang: 'zh-cn',
|
||||
volume: this.volume,
|
||||
autoplay: this.autoplay,
|
||||
loop: this.loop,
|
||||
videoInit: this.videoInit,
|
||||
playbackRate: this.playbackRate,
|
||||
lastPlayTime: this.lastPlayTime,
|
||||
pip: this.pip,
|
||||
controls: this.controls,
|
||||
danmu: this.formatDanmu(this.danmu),
|
||||
progressDot: this.progressDot
|
||||
})
|
||||
this.player.emit('resourceReady', this.resource)
|
||||
},
|
||||
initHls(){
|
||||
this.player = new HlsPlayer({
|
||||
el: this.$refs.scVideo,
|
||||
url: this.src,
|
||||
fluid: true,
|
||||
poster: this.poster,
|
||||
isLive: true,
|
||||
ignores: ['time','progress'],
|
||||
lang: 'zh-cn',
|
||||
volume: this.volume,
|
||||
pip: this.pip,
|
||||
controls: this.controls,
|
||||
})
|
||||
},
|
||||
formatDanmu(danmu){
|
||||
if(!danmu){
|
||||
return false
|
||||
}
|
||||
let newDanmu = []
|
||||
danmu.forEach(item => {
|
||||
newDanmu.push({
|
||||
id: item.id || '',
|
||||
start: item.start || 0,
|
||||
txt: item.txt || '',
|
||||
duration: 10000,
|
||||
mode: item.mode || 'scroll',
|
||||
style: item.style || {}
|
||||
})
|
||||
})
|
||||
return {
|
||||
comments: newDanmu
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-video:deep(.danmu) > * {color: #fff;font-size:20px;font-weight:bold;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000;}
|
||||
.sc-video:deep(.xgplayer-controls) {background-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.3));}
|
||||
.sc-video:deep(.xgplayer-progress-tip) {border:0;color: #fff;background: rgba(0,0,0,.5);line-height: 25px;padding: 0 10px;border-radius: 25px;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="MP4点播">
|
||||
<sc-video
|
||||
ref="mp4"
|
||||
src="https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080.mp4"
|
||||
poster="https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg"
|
||||
:resource="resource"
|
||||
:danmu="danmu"
|
||||
:progressDot="progressDot"
|
||||
pip
|
||||
></sc-video>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-form inline>
|
||||
<el-form-item>
|
||||
<el-select v-model="mode" placeholder="Select">
|
||||
<el-option label="默认" value="scroll"></el-option>
|
||||
<el-option label="顶部" value="top"></el-option>
|
||||
<el-option label="底部" value="bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="input" placeholder="Please input" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="sendComment">发送弹幕</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="HlS(m3u8)直播">
|
||||
<sc-video
|
||||
src="http://cctvalih5ca.v.myalicdn.com/live/cctv5_2/index.m3u8"
|
||||
isLive
|
||||
></sc-video>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scVideo from '@/components/scVideo'
|
||||
|
||||
export default {
|
||||
name: 'scvideo',
|
||||
components: {
|
||||
scVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
mode: 'scroll',
|
||||
resource: [
|
||||
{name: '720P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4'},
|
||||
{name: '1080P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080.mp4'}
|
||||
],
|
||||
progressDot: [
|
||||
{time: 3, text: '标记文字'}
|
||||
],
|
||||
danmu: [
|
||||
{
|
||||
id: '1',
|
||||
start: 3000,
|
||||
txt: 'SCUI VIDEO DEMO'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
start: 3000,
|
||||
txt: '一键三连，下次一定'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
sendComment(){
|
||||
if(this.$refs.mp4.player.danmu && this.input){
|
||||
this.$refs.mp4.player.danmu.sendComment({
|
||||
id: 'newId' + new Date().getTime(),
|
||||
start: this.$refs.mp4.player.currentTime*1000,
|
||||
txt: this.input,
|
||||
mode: this.mode
|
||||
})
|
||||
this.input = ''
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -57,6 +57,10 @@ module.exports = {
|
|||
echarts: {
|
||||
name: "echarts",
|
||||
test: /[\\/]node_modules[\\/]echarts[\\/]/
|
||||
},
|
||||
xgplayer: {
|
||||
name: "xgplayer",
|
||||
test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue