|
|
@@ -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>
|
wangxy