|
|
@@ -0,0 +1,415 @@
|
|
|
+<template>
|
|
|
+ <view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view @click="goUpPage" class="nav-bar-icon"></view>
|
|
|
+ <text class="nav-bar-title">{{jieInfo.jieIntro}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <button @click="handleTest">test</button>
|
|
|
+
|
|
|
+ <view class="ezy-video-box course-video-box">
|
|
|
+ <view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
|
|
|
+ :change:playAuth="renderScript.receiveMsg" :videoId="videoId" :change:videoId="renderScript.videoIdFun"
|
|
|
+ :hideFlag="hideFlag" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
|
|
|
+ :change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
|
|
|
+ :change:seekTime="renderScript.seekTimeFun" class="ezy-video">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 核心基础题 -->
|
|
|
+ <view class="course-content-border">
|
|
|
+ <view class="course-content-box">
|
|
|
+ <view v-for="(item,index) in jieInfo.jiedianList1" :key="index" @click="markersClick(item)">
|
|
|
+ <view class="title-play-box">
|
|
|
+ <icon class="course-icon"></icon>
|
|
|
+ <view class="course-title">{{item.name}}</view>
|
|
|
+ <view class="course-title">{{item.time1}}</view>
|
|
|
+ <view class="course-title">{{item.time2}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 能力提升题 -->
|
|
|
+ <view class="course-content-border">
|
|
|
+ <view class="course-content-box">
|
|
|
+ <view v-for="(item,index) in jieInfo.jiedianList2" :key="index" @click="markersClick(item)">
|
|
|
+ <view class="title-play-box">
|
|
|
+ <icon class="course-icon"></icon>
|
|
|
+ <view class="course-title">{{item.name}}</view>
|
|
|
+ <view class="course-title">{{item.time1}}</view>
|
|
|
+ <view class="course-title">{{item.time2}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <tishiDlVue ref="popupRef"></tishiDlVue>
|
|
|
+
|
|
|
+
|
|
|
+ <danyuanInfoVue ref="dyRef"></danyuanInfoVue>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from 'vue';
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReady
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+ import {
|
|
|
+ getVideoAuth,
|
|
|
+ getVideoAuthYk,
|
|
|
+ videoWancheng
|
|
|
+ } from "@/api/shipin.js"
|
|
|
+ import {
|
|
|
+ toast,convertTimeToSeconds
|
|
|
+ } from "@/utils/common";
|
|
|
+ import cacheManager from "@/utils/cacheManager.js";
|
|
|
+ import * as httpApi from "@/api/chanpinShuxue.js";
|
|
|
+ import tishiDlVue from './components/tishiDl.vue';
|
|
|
+ import danyuanInfoVue from './components/danyuanInfo.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ danyuanId: null,
|
|
|
+ jieInfo: {
|
|
|
+ cover1: '',
|
|
|
+ cover2: '',
|
|
|
+ jieId: '',
|
|
|
+ jieIntro: '',
|
|
|
+ jieName: '',
|
|
|
+ jiedianList1: [],
|
|
|
+ jiedianList2: [],
|
|
|
+ type: '',
|
|
|
+ video1: '',
|
|
|
+ video2: '',
|
|
|
+ },
|
|
|
+
|
|
|
+ pageData: null, //上个页面获取的视频参数（视频id）
|
|
|
+ playAuth: "", //播放凭证
|
|
|
+ progressMarkers: [],
|
|
|
+ hideFlag: 'show',
|
|
|
+ videoId: "", //阿里云视频id
|
|
|
+ seekTime: '',
|
|
|
+ jieId: '',
|
|
|
+ shipinTitle: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ tishiDlVue,danyuanInfoVue
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.init(options)
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ this.hideFlag = 'hide'
|
|
|
+ },
|
|
|
+ onUnload() {
|
|
|
+ this.hideFlag = 'hide'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleTest() {
|
|
|
+ this.$refs.dyRef.handleShow(1)
|
|
|
+ },
|
|
|
+ // 当前节学习完成
|
|
|
+ saveJieWancheng() {
|
|
|
+ getShuxueChanpinWancheng({jieId: this.jieInfo.jieId}).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ // 学习完成提示弹窗
|
|
|
+ this.$refs.popupRef.open();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 当前节学习开始
|
|
|
+ saveJinduStart() {
|
|
|
+ httpApi.getShuxueChanpinSave({jieId: this.jieInfo.jieId})
|
|
|
+ },
|
|
|
+ courseBjFun() {
|
|
|
+ return 'static/images/course/couse-shuxue-bj.png'
|
|
|
+ },
|
|
|
+ courseIconFun() {
|
|
|
+ return 'static/images/course/shuxue-icon.png'
|
|
|
+ },
|
|
|
+ getDataInfo() {
|
|
|
+ httpApi.getShuxueChanpinJieInfo({
|
|
|
+ jieId: this.jieId
|
|
|
+ }).then(res => {
|
|
|
+ // 时间节点转换
|
|
|
+ res.data.jiedianList1.forEach(item => item.offset = convertTimeToSeconds(item.time1))
|
|
|
+ res.data.jiedianList2.forEach(item => item.offset = convertTimeToSeconds(item.time1))
|
|
|
+ // 重新赋值
|
|
|
+ Object.assign(this.jieInfo, res.data)
|
|
|
+ // 触发当前节学习进度
|
|
|
+ this.saveJinduStart();
|
|
|
+ // 针对视频进行赋值
|
|
|
+ this.videoId = this.jieInfo.video1;
|
|
|
+ // this.videoId = this.jieInfo.video2;
|
|
|
+ // 针对节点赋值
|
|
|
+ this.progressMarkers = this.jieInfo.jiedianList1;
|
|
|
+ // this.progressMarkers = this.jieInfo.jiedianList2;
|
|
|
+ // 执行方法
|
|
|
+ this.getLive(); //获取播放凭证
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init(options) {
|
|
|
+ this.jieId = options.jieId;
|
|
|
+ this.getDataInfo()
|
|
|
+ },
|
|
|
+ playEnd(data) {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ plus.screen.lockOrientation('portrait-primary');
|
|
|
+ // #endif
|
|
|
+ this.saveJieWancheng();
|
|
|
+ },
|
|
|
+ getLive() {
|
|
|
+ if (!this.videoId) {
|
|
|
+ toast("video缺失！")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let req = {
|
|
|
+ videoId: this.videoId
|
|
|
+ }
|
|
|
+ getVideoAuth(req).then(res => {
|
|
|
+ this.playAuth = res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ markersClick(data) {
|
|
|
+ this.seekTime = ""
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.seekTime = data.offset
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goUpPage() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<script module="renderScript" lang="renderjs">
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ console.log("renderScript1")
|
|
|
+ // 在适合的生命周期，通过script和link标签引入播放器sdk、css
|
|
|
+ // this.loadWebPlayerSDK()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ player: null,
|
|
|
+ playAuth: '',
|
|
|
+ videoId: '',
|
|
|
+ progressMarkers: [],
|
|
|
+ isFullScreen: false,
|
|
|
+ seekTime: ''
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ receiveMsg(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ // console.log('service层中的options发生变化')
|
|
|
+ // console.log('新值', newValue)
|
|
|
+ // console.log('旧值', oldValue)
|
|
|
+ // ownerInstance和this.$ownerInstance一样，可用来向service层通信
|
|
|
+ // instance和ownerInstance的区别是：
|
|
|
+ // instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点；
|
|
|
+ // instance的作用目前尚不明确，官方没有给出用法
|
|
|
+ if (newValue) {
|
|
|
+ this.playAuth = ''
|
|
|
+ this.playAuth = newValue
|
|
|
+ this.loadWebPlayerSDK()
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ videoIdFun(newValue, oldValue, ownerInstance, instance) {
|
|
|
+ if (newValue) {
|
|
|
+ this.videoId = ''
|
|
|
+ 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) {
|
|
|
+ this.player.play()
|
|
|
+ this.player.seek(newValue)
|
|
|
+ // switch (this.player.getStatus()) {
|
|
|
+ // case 'init':
|
|
|
+ // break;
|
|
|
+ // case 'ready':
|
|
|
+ // break;
|
|
|
+ // case 'loading':
|
|
|
+ // this.player.play()
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'play':
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'pause':
|
|
|
+ // this.player.play()
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'playing':
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ // break;
|
|
|
+ // case 'waiting':
|
|
|
+ // break;
|
|
|
+ // case 'error':
|
|
|
+ // break;
|
|
|
+ // case 'ended':
|
|
|
+ // break;
|
|
|
+ // default:
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // this.player.seek(newValue)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ playAli() {
|
|
|
+ let that = this
|
|
|
+ // console.log(this.videoId);
|
|
|
+ // console.log(this.playAuth);
|
|
|
+ //配置播放器
|
|
|
+ if (!this.playAuth) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var player = new Aliplayer({
|
|
|
+ id: "wgy-player-test",
|
|
|
+ "vid": this.videoId,
|
|
|
+ "playauth": this.playAuth,
|
|
|
+ extraInfo: {
|
|
|
+ poster: 'noposter'
|
|
|
+ },
|
|
|
+ fullscreenEvents: {
|
|
|
+ fullscreenChange: (isFull) => {
|
|
|
+ this.isFullScreen = isFull
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
|
|
|
+ // "vid": '',
|
|
|
+ // "playauth": '',
|
|
|
+ // "playConfig": {
|
|
|
+ // "EncryptType": 'AliyunVoDEncryption'
|
|
|
+ // },
|
|
|
+ "skinLayout": [{
|
|
|
+ "name": "bigPlayButton",
|
|
|
+ "align": "blabs",
|
|
|
+ "x": 30,
|
|
|
+ "y": 80
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "H5Loading",
|
|
|
+ "align": "cc"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "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,
|
|
|
+ "autoplay": false,
|
|
|
+ "isLive": false,
|
|
|
+ "rePlay": false,
|
|
|
+ "playsinline": true,
|
|
|
+ "preload": false,
|
|
|
+ "controlBarVisibility": "hover",
|
|
|
+ "useH5Prism": true
|
|
|
+
|
|
|
+ }, function(player) {});
|
|
|
+ this.player = player;
|
|
|
+ player.on('canplay', function() {
|
|
|
+ console.log('canplay', this.player.tag);
|
|
|
+ player.tag.play();
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ player.on('ended', function(data) {
|
|
|
+ that.exitFullScreen();
|
|
|
+ that.$ownerInstance.callMethod('playEnd', {
|
|
|
+ data: 'end'
|
|
|
+ })
|
|
|
+ // uni.$emit('playEnd', {
|
|
|
+ // data: 'end'
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen(); // 标准方法
|
|
|
+ } else if (document.mozCancelFullScreen) { // Firefox
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.msExitFullscreen) { // IE/Edge
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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 = () => {
|
|
|
+ // console.log(this.playAuth);
|
|
|
+ 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