UP 更新scVideo 组件的使用方式

src/components/scVideo/index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Descripttion: xgplayer二次封装
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年11月29日12:10:06
- * @LastEditors:
+ * @LastEditors: sakuya
- * @LastEditTime:
+ * @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 },
-			//初始化显示首帧
+			isLive: { type: Boolean, default: false },
-			videoInit: { type: Boolean, default: false },
+			options: { type: Object, default: () => {} }
-			//画中画
-			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
 			}
 		},
+		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),
+					fluid: true,
-					progressDot: this.progressDot
+					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,
+					...this.options
-					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
-				}
 			}
 		}
 	}
@@ -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>

src/views/vab/video.vue

@@ -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
+					<sc-video :src="playUrl" :options="options"></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
+					<el-row :gutter="1">
-						src="https://hsplay-360.v.btime.com/live_btime/btv_sn_20170706_s4/index.m3u8"
+						<el-col :span="12">
-						isLive
+							<sc-video :src="liveUrl" isLive :options="{volume: 0}"></sc-video>
-					></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: '',
+				playUrl: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4",
-				mode: 'scroll',
+				options: {
-				resource: [
+					poster: "https://fastly.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg",
-					{name: '720P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4'},
+					pip: true
-					{name: '1080P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080.mp4'}
+				},
-				],
+				liveUrl: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv1.m3u8",
-				progressDot: [
+				liveUrl_2: "http://local.live.jxtvcn.com.cn/live-jxtv/tv_jxtv6.m3u8",
-					{time: 3, text: '标记文字'}
+				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",
-				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>