|
|
@@ -8,16 +8,6 @@
|
|
|
<icon @click="goUpPage"></icon>
|
|
|
</view>
|
|
|
<view class="xuexi-dagang-body">
|
|
|
- <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="dagang-xh-box">
|
|
|
<view class="xh-title">您将学会</view>
|
|
|
@@ -68,7 +58,7 @@
|
|
|
convertTimeToSeconds
|
|
|
} from "@/utils/common";
|
|
|
import cacheManager from "@/utils/cacheManager.js";
|
|
|
- import * as httpApi from "@/api/chanpinShuxue.js";
|
|
|
+ import * as httpApi from "@/api/chanpinZiRanPinDu.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -88,7 +78,6 @@
|
|
|
hideFlag: 'show',
|
|
|
videoId: "", //阿里云视频id
|
|
|
seekTime: '',
|
|
|
- danyuanId: '',
|
|
|
shipinTitle: '',
|
|
|
}
|
|
|
},
|
|
|
@@ -121,271 +110,18 @@
|
|
|
return 'static/images/course/shuxue-icon.png'
|
|
|
},
|
|
|
getDataInfo() {
|
|
|
- httpApi.getShuxueChanpinDanyuanInfo({
|
|
|
+ httpApi.getPinduChanpinDanyuanInfo({
|
|
|
danyuanId: this.danyuanId
|
|
|
}).then(res => {
|
|
|
// 重新赋值
|
|
|
Object.assign(this.danyuanInfo, res.data)
|
|
|
this.$refs.popupRef.open();
|
|
|
- nextTick(() => {
|
|
|
- // 针对视频进行赋值
|
|
|
- this.videoId = this.danyuanInfo.video;
|
|
|
- // 执行方法
|
|
|
- this.getLive(); //获取播放凭证
|
|
|
- })
|
|
|
})
|
|
|
},
|
|
|
init(options) {
|
|
|
this.danyuanId = options.danyuanId;
|
|
|
this.getDataInfo()
|
|
|
},
|
|
|
- playEnd(data) {
|
|
|
- // #ifdef APP-PLUS
|
|
|
- plus.screen.lockOrientation('portrait-primary');
|
|
|
- // #endif
|
|
|
- },
|
|
|
- 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
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
},
|
|
|
}
|
|
|
</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