|
|
@@ -1,97 +1,128 @@
|
|
|
<template>
|
|
|
- <view id="player-con"></view>
|
|
|
+ <view ref="videoContent" id="wgy-player-test" :playAuth="playAuth" :change:playAuth="renderScript.receiveMsg">
|
|
|
+ </view>
|
|
|
</template>
|
|
|
-<script module="aa" lang="renderjs">
|
|
|
- //#ifdef H5
|
|
|
- import {
|
|
|
- videoPolicy,
|
|
|
- getVideoAuth,
|
|
|
- getVideoRefresh
|
|
|
- } from "@/api/shipin.js"
|
|
|
- //#endif
|
|
|
- //#ifdef APP-PLUS
|
|
|
- const { videoPolicy,getVideoAuth,getVideoRefresh} = require("../../api/shipin.js")
|
|
|
- //#endif
|
|
|
-
|
|
|
- const loadWebPlayerSDK = async () => {
|
|
|
- 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 = () => {
|
|
|
- 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>
|
|
|
+ import {
|
|
|
+ onLoad,
|
|
|
+ onReady
|
|
|
+ } from '@dcloudio/uni-app';
|
|
|
+ import {
|
|
|
+ videoPolicy,
|
|
|
+ getVideoAuth,
|
|
|
+ getVideoRefresh
|
|
|
+ } from "@/api/shipin.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- pageData: {
|
|
|
- playauth: ''
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- console.log(111111)
|
|
|
- loadWebPlayerSDK().then(() => {
|
|
|
- // this.getPlayAuth()
|
|
|
- this.playAli()
|
|
|
- }).catch((e) => {
|
|
|
- console.log("加载播放器SDK失败", e);
|
|
|
- });
|
|
|
+ options: {}, //上个页面获取的视频参数（视频id）
|
|
|
+ playAuth: "", //播放凭证
|
|
|
+ videoId: "", //阿里云视频id
|
|
|
+ videoData: {
|
|
|
+ playauth: '',
|
|
|
+ videoId: 'b997f16cb9cb474cb93526cff77d8801',
|
|
|
+ }, //阿里云视频其他参数
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- getPlayAuth() {
|
|
|
+ getLive() {
|
|
|
let req = {
|
|
|
- videoId: 'b997f16cb9cb474cb93526cff77d8801'
|
|
|
+ videoId: this.videoData.videoId
|
|
|
}
|
|
|
getVideoAuth(req).then(res => {
|
|
|
- this.pageData.playauth = res.data
|
|
|
- this.playAli()
|
|
|
+ this.playAuth = res.data
|
|
|
+ // console.log(this.videoData)
|
|
|
+ //this.playAli()
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log("getLive")
|
|
|
+ this.getLive(); //获取播放凭证
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<script module="renderScript" lang="renderjs">
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ console.log("renderScript1")
|
|
|
+ // 在适合的生命周期，通过script和link标签引入播放器sdk、css
|
|
|
+ this.loadWebPlayerSDK()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ player: null,
|
|
|
+ playAuth: '',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 = newValue
|
|
|
+ this.playAli()
|
|
|
+ }
|
|
|
+ },
|
|
|
playAli() {
|
|
|
- let configData = {
|
|
|
- "id": "player-con",
|
|
|
+ //配置播放器
|
|
|
+ var player = new Aliplayer({
|
|
|
+ id: "wgy-player-test",
|
|
|
"vid": 'b997f16cb9cb474cb93526cff77d8801',
|
|
|
- "playauth": this.pageData.playauth,
|
|
|
+ "playauth": this.playAuth,
|
|
|
+ "encryptType": 1,
|
|
|
+ // "playConfig": {
|
|
|
+ // "EncryptType": 'AliyunVoDEncryption'
|
|
|
+ // },
|
|
|
"qualitySort": "asc",
|
|
|
"format": "m3u8",
|
|
|
"mediaType": "video",
|
|
|
"encryptType": 1,
|
|
|
- "width": '100%',
|
|
|
- progressMarkers: [{
|
|
|
+ "progressMarkers": [{
|
|
|
offset: 30,
|
|
|
isCustomized: true,
|
|
|
coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/9A3F562E595E4764AD1DD546FA52C6E5-6-2.png',
|
|
|
title: 'test title',
|
|
|
describe: 'test string',
|
|
|
}, {
|
|
|
- offset: 50,
|
|
|
+ offset: 150,
|
|
|
isCustomized: true,
|
|
|
coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/1E7F402241CD4C0F94AD2BBB5CCC3EC7-6-2.png',
|
|
|
title: 'test title',
|
|
|
describe: 'test string',
|
|
|
}, {
|
|
|
- offset: 150,
|
|
|
+ offset: 250,
|
|
|
isCustomized: true,
|
|
|
coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
|
|
|
title: 'test title',
|
|
|
describe: 'test string',
|
|
|
}, {
|
|
|
- offset: 120,
|
|
|
+ offset: 550,
|
|
|
+ isCustomized: true,
|
|
|
+ coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
|
|
|
+ title: 'test title',
|
|
|
+ describe: 'test string',
|
|
|
+ }, {
|
|
|
+ offset: 320,
|
|
|
isCustomized: true,
|
|
|
coverUrl: 'https://alivc-demo-vod.aliyuncs.com/image/cover/553AEA01161342C8A2B1756E83B69B5B-6-2.png',
|
|
|
title: 'test title',
|
|
|
describe: 'test string',
|
|
|
}],
|
|
|
+ "width": '100%',
|
|
|
"height": '500px',
|
|
|
"autoplay": false,
|
|
|
"isLive": false,
|
|
|
@@ -100,11 +131,45 @@
|
|
|
"preload": false,
|
|
|
"controlBarVisibility": "hover",
|
|
|
"useH5Prism": true
|
|
|
+
|
|
|
+ }, function(player) {});
|
|
|
+ this.player = player;
|
|
|
+ player.one('canplay', function() {
|
|
|
+ console.log('canplay', this.player.tag);
|
|
|
+ player.tag.play();
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //监听获取播放凭证的方法
|
|
|
+ checkValue() {
|
|
|
+ console.log(this.videoId, this.authId, "1111888888")
|
|
|
+ if (!this.videoData.playAuth) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.checkValue();
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ this.getLive();
|
|
|
}
|
|
|
- var player = new Aliplayer(configData, function(player) {
|
|
|
- console.log('The player is created.')
|
|
|
+ },
|
|
|
+
|
|
|
+ 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.checkValue();
|
|
|
+ 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>
|
wangguoyu