From 4dd61edc998aa722ca2d5b7275f8dc1bdf0bd5fb Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Mon, 29 Nov 2021 19:24:05 +0800
Subject: [PATCH] =?UTF-8?q?:tada:=20=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E7=BB=84=E4=BB=B6=20scVideo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   4 +-
 src/components/scVideo/index.vue | 123 +++++++++++++++++++++++++++++++
 src/views/vab/video.vue          | 100 +++++++++++++++++++++++++
 vue.config.js                    |   4 +
 4 files changed, 230 insertions(+), 1 deletion(-)
 create mode 100644 src/components/scVideo/index.vue
 create mode 100644 src/views/vab/video.vue

diff --git a/package.json b/package.json
index 60be331a..ba2ff87a 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/scVideo/index.vue b/src/components/scVideo/index.vue
new file mode 100644
index 00000000..74cf49a7
--- /dev/null
+++ b/src/components/scVideo/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/vab/video.vue b/src/views/vab/video.vue
new file mode 100644
index 00000000..24248e38
--- /dev/null
+++ b/src/views/vab/video.vue
@@ -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>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 581e61cc..c2a56b49 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -57,6 +57,10 @@ module.exports = {
 					echarts: {
 						name: "echarts",
 						test: /[\\/]node_modules[\\/]echarts[\\/]/
+					},
+					xgplayer: {
+						name: "xgplayer",
+						test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
 					}
 				}
 			}