UP 更新scVideo 组件的使用方式
This commit is contained in:
sakuya
parent
ff578a8bdd
commit
fee822d7bc
|
|
@ -1,10 +1,10 @@
|
|||
<!--
|
||||
* @Descripttion: xgplayer二次封装
|
||||
* @version: 1.0
|
||||
* @version: 1.1
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年11月29日12:10:06
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
* @LastEditors: sakuya
|
||||
* @LastEditTime: 2022年5月30日21:02:50
|
||||
-->
|
||||
|
||||
<template>
|
||||
|
|
@ -17,40 +17,27 @@
|
|||
|
||||
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 },
|
||||
//循环播放
|
||||
controls: { type: Boolean, default: true },
|
||||
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: () => [] },
|
||||
isLive: { type: Boolean, default: false },
|
||||
options: { type: Object, default: () => {} }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
src(val){
|
||||
if(this.player.hasStart){
|
||||
this.player.src = val
|
||||
}else{
|
||||
this.player.start(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.isLive){
|
||||
this.initHls()
|
||||
|
|
@ -63,54 +50,27 @@
|
|||
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
|
||||
fluid: true,
|
||||
lang: 'zh-cn',
|
||||
...this.options
|
||||
})
|
||||
this.player.emit('resourceReady', this.resource)
|
||||
},
|
||||
initHls(){
|
||||
this.player = new HlsPlayer({
|
||||
el: this.$refs.scVideo,
|
||||
url: this.src,
|
||||
autoplay: this.autoplay,
|
||||
loop: this.loop,
|
||||
controls: this.controls,
|
||||
fluid: true,
|
||||
poster: this.poster,
|
||||
isLive: true,
|
||||
ignores: ['time','progress'],
|
||||
lang: 'zh-cn',
|
||||
volume: this.volume,
|
||||
pip: this.pip,
|
||||
controls: this.controls,
|
||||
...this.options
|
||||
})
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -120,4 +80,4 @@
|
|||
.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>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,30 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-alert title="播放器使用来自西瓜视频的西瓜播放器xgplayer" type="success" style="margin-bottom:20px;"></el-alert>
|
||||
<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>
|
||||
<sc-video :src="playUrl" :options="options"></sc-video>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="12">
|
||||
<el-card shadow="never" header="HlS(m3u8)直播">
|
||||
<sc-video
|
||||
src="https://hsplay-360.v.btime.com/live_btime/btv_sn_20170706_s4/index.m3u8"
|
||||
isLive
|
||||
></sc-video>
|
||||
<el-row :gutter="1">
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_2" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="1" style="margin-top: 1px;">
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_3" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<sc-video :src="liveUrl_4" isLive :options="{volume: 0}"></sc-video>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -53,45 +41,22 @@
|
|||
},
|
||||
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: '一键三连，下次一定'
|
||||
}
|
||||
]
|
||||
playUrl: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4",
|
||||
options: {
|
||||
poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
|
||||
pip: true
|
||||
},
|
||||
liveUrl: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv1.m3u8",
|
||||
liveUrl_2: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv6.m3u8",
|
||||
liveUrl_3: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv7.m3u8",
|
||||
liveUrl_4: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv8.m3u8",
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue