🎉 新增视频播放器组件 scVideo
This commit is contained in:
sakuya
parent
d28438f18f
commit
4dd61edc99
|
|
@ -23,7 +23,9 @@
|
||||||
"vue-i18n": "9.1.9",
|
"vue-i18n": "9.1.9",
|
||||||
"vue-router": "4.0.12",
|
"vue-router": "4.0.12",
|
||||||
"vuedraggable": "4.0.3",
|
"vuedraggable": "4.0.3",
|
||||||
"vuex": "4.0.2"
|
"vuex": "4.0.2",
|
||||||
|
"xgplayer": "2.31.3",
|
||||||
|
"xgplayer-hls": "2.4.32-3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "4.5.15",
|
"@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: {
|
echarts: {
|
||||||
name: "echarts",
|
name: "echarts",
|
||||||
test: /[\\/]node_modules[\\/]echarts[\\/]/
|
test: /[\\/]node_modules[\\/]echarts[\\/]/
|
||||||
|
},
|
||||||
|
xgplayer: {
|
||||||
|
name: "xgplayer",
|
||||||
|
test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue