uniProject/components/questionJiexi/questionJiexiYingyu.vue

<template>
	<view>
		<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
			mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
			<view class="ezy-dajx-page"  :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
				<view class="icon-title-navBar-box">
					<view @click="handleBack" class="nav-bar-icon"></view>
					<view class="nav-bar-title">单元测试</view>
				</view>
				<view class="shiti-frame-box">
					<view class="dajx-content-box">
						<!-- 思路分析 -->
						<view class="slfx-title"></view>
						<!-- <view class="slfx-content"> {{data.answer}}</view> -->
						<!-- <rich-text class="slfx-content" :nodes="data.answer"></rich-text> -->
						<textReplaceIconVue :code="code" :question="data" :text="data.answer" :placeholders="data.placeholders" class="slfx-content"></textReplaceIconVue>

						<!-- 视频讲解 -->
						<view class="spjj-title" v-if="videoId"></view>
						<view class="ezy-video-box" v-if="videoId" >
							<!-- 这里放视频 ↓ -->
							<view class="ezy-video" ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
								:change:playAuth="renderScript.receiveMsg" :videoId="videoId"
								:change:videoId="renderScript.videoIdFun" :hideFlag="hideFlag"
								:change:hideFlag="renderScript.hideFlagFun" :seekTime="seekTime"
								:change:seekTime="renderScript.seekTimeFun">
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import textReplaceIconVue from '@/components/question/yingyu/textReplaceIcon.vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		getVideoAuth,
	} from "@/api/shipin.js"
	export default {
		components: {textReplaceIconVue},
		props: {
			cardId: {
				type: [String,Number],
				default: 1
			},
			code: {
				type: String
			}
		},
		data() {
			return {
				pageData: null, //上个页面获取的视频参数（视频id）
				playAuth: "", //播放凭证
				progressMarkers: [],
				videoId: "", //阿里云视频id
				seekTime: '',
				hideFlag: 'show',
				data: {},
			}
		},
		onHide() {
			this.hideFlag = 'hide'
		},
		onUnload() {
			this.hideFlag = 'hide'
		},
		methods: {
			showPopup(item) {
				this.data = item;
				if (item.jiangjie) {
					this.videoId = item.jiangjie
					this.getLive(); //获取播放凭证
				}
				this.$refs.popupRef.open()
			},
			handleBack(item) {
				this.$refs.popupRef.close()
				uni.$emit('question-jiexi-close')
			},
			getLive() {
				let req = {
					videoId: this.videoId
				}
				getVideoAuth(req).then(res => {
					this.playAuth = res.data
				})
			},
			markersClick(data) {
				this.seekTime = ""
				this.$nextTick(() => {
					this.seekTime = data.offset
				});
			},
			courseBjFun() {
				const cardId = Number(this.cardId);
				switch (cardId) {
					case 1:
						return 'static/images/course/couse-shuxue-bj.png'
						break;
					case 2:
						return 'static/images/course/course-yingyu-bj.png'
						break;
					default:
						break;
				}
			}
		
		},
		created() {
			// console.log("getLive")
			// this.getLive(); //获取播放凭证

		},

	}
</script>



<script module="renderScript" lang="renderjs">
	export default {
		mounted() {
			console.log("renderScript1")
			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
		},
		data() {
			return {
				player: null,
				playAuth: '',
				videoId: '',
				progressMarkers: [],
				seekTime: '',
				isFirst: -1,
			}
		},
		methods: {
			receiveMsg(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.playAuth = newValue
					this.loadWebPlayerSDK()
				}
			},
			videoIdFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.videoId = newValue
				}
			},
			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
				if (this.player) {
					this.player.pause()
				}

			},
			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.progressMarkers = newValue
				}
			},
			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					console.log(newValue, 'newValuenewValuenewValuenewValuenewValue')
					console.log(this.player.getStatus(), 'newValuenewValuenewValuenewValuenewValue')
					this.player.play()
					this.player.seek(newValue)
					//	this.player.seek(newValue)
				}
			},
			playAli() {
				if (this.isFirst == 0) {
					this.isFirst = -1
					return;
				}
				this.player = null;
				//配置播放器
				var player = new Aliplayer({
					id: "wgy-player-test",
					"vid": this.videoId,
					"playauth": this.playAuth,
					extraInfo: { poster: 'noposter' },
					// "playConfig": {
					// 	"EncryptType": 'AliyunVoDEncryption'
					// },
					"skinLayout": [{
							"name": "bigPlayButton",
							"align": "blabs",
							"x": 30,
							"y": 80
						},
						{
							"name": "controlBar",
							"align": "blabs",
							"x": 0,
							"y": 0,
							"children": [{
									"name": "progress",
									"align": "blabs",
									"x": 0,
									"y": 44
								},
								{
									"name": "playButton",
									"align": "tl",
									"x": 15,
									"y": 12
								},
								{
									"name": "fullScreenButton",
									"align": "tr",
									"x": 10,
									"y": 12
								},
								{
								          "name": "timeDisplay",
								          "align": "tr",
								          "x": 10,
								          "y": 5
								        }
							]
						}
					],
					"qualitySort": "asc",
					"format": "mp4",
					"mediaType": "video",
					"encryptType": 1,
					"progressMarkers": this.progressMarkers,
					"width": '100%',
					"height": '500px',
					"autoplay": false,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": false,
					"controlBarVisibility": "hover",
					"useH5Prism": true

				}, function(player) {});
				this.player = player;
				player.one('canplay', function() {
					console.log('canplay', this.player.tag);
					player.tag.play();

				});
				this.isFirst ++;
			},


			loadWebPlayerSDK() {
				return new Promise((resolve, reject) => {
					const s_tag = document.createElement('script'); // 引入播放器js
					s_tag.type = 'text/javascript';
					s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						this.playAli()
						resolve();
					}
					document.body.appendChild(s_tag);
					const l_tag = document.createElement('link'); // 引入播放器css
					l_tag.rel = 'stylesheet';
					l_tag.href =
						'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
					document.body.appendChild(l_tag);
				});
			},
		}
	}
</script>