英语题追加音频播放

components/questionJiexi/questionJiexiYingyu.vue

@@ -0,0 +1,271 @@
+<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	:question="data" :text="data.answer" :placeholders="data.placeholders"></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
+			},
+		},
+		data() {
+			return {
+				pageData: null, //上个页面获取的视频参数（视频id）
+				playAuth: "", //播放凭证
+				progressMarkers: [],
+				videoId: "", //阿里云视频id
+				seekTime: '',
+				hideFlag: 'show',
+				data: {},
+			}
+		},
+		onHide() {
+			console.log('onHideonHideonHideonHide');
+			this.hideFlag = 'hide'
+		},
+		onUnload() {
+			console.log('onUnloadonUnloadonUnloadonUnloadonUnload');
+			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>