uniapp 基础阿里云点播 使用

这是加密的 且适用于app端

对于UNI APP端的开发而言，由于上并没有document
不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用，
因此官方推出了renderjs方案，来解决上述问题。
1
2
3

一、官方 renderjs 文档
二、其他博主的记录 可以详细看看怎么使用 uniapp中使用renderjs的一些细节

因为业务需要记录获取用户学习时长，
所以在这基础上加了 存储 当前播放记录以及全屏 其他的一些 的功能，
在另一篇有详细记录的代码⬇
1
2
3

其他功能

以下是基础的播放器 功能

<template>
  <view class="container">
    <div
      ref="videoContent"
      @tap="renderScript.handleClick"
      id="url-player-test"
      :videoData="videoData"
      :change:videoData="renderScript.receiveMsg"
    ></div>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js"; //封装的请求方法
export default {
  data() {
    return {
      options: {},//上个页面获取的视频参数（视频id）
      playAuth: "",//播放凭证
      videoId: "",//阿里云视频id
      videoData: {},//阿里云视频其他参数
    }
  },
 //第一次加载
  onLoad(options) {
    this.options = JSON.parse(options.data);//根据自己上个页面的传参来接受
    this.videoId = this.options.video;//阿里云视频id
    methods: {
    // 获取数据
    getLive() {
      var data = {
        ...this.options,
      };
      $http
        .request({
          url: `xxxx`,//接口地址
          method: "Post", 
          data,//后端需要的参数主要为阿里云视频id
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
        //playAuth 是播放凭证 通过后端自己根据api去获取，返回时不知道为什么结束会带有= 有时候甚至是2个 所以要截取等号 不然不能播放
          var playAuth = res.video.playAuth.replace(/=/g, "");
          this.videoData = {
            ...res.video,//视频其他信息
            videoId: res.video.video,//阿里云视频id
            playAuth: playAuth,//阿里云播放凭证
          };
          this.playAuth = playAuth;
          this.$forceUpdate();
        });
    },
  


  },
  created() {
    this.getLive();//获取播放凭证
    
  },
};
</script>

<script module="renderScript" lang="renderjs">
export default {
	mounted() {
		// 在适合的生命周期，通过script和link标签引入播放器sdk、css
		this.loadWebPlayerSDK()
	},
	data() {
		return {
			player: null,
			
		}
	},
		methods: {
	getLive() {
          //配置播放器
			var player = new Aliplayer({
				id: "url-player-test",
				"vid": this.videoData.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
				"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
				"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
				"playConfig": {
					"EncryptType": 'AliyunVoDEncryption'
				},
        width: '100%', //容器的大小
        height: '100%', //容器的大小
      
			}, 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();
				}
			},

		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/apsara-media-box/imp-web-player/2.20.3/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/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
		
		
		
						document.body.appendChild(l_tag);
					});
				},
loadComponent() {
			return new Promise((resolve, reject) => {
				const s_tag = document.createElement('script');
				s_tag.type = 'text/javascript';
				// 需要先下载组件 js 文件，放到项目 /static/ 目录下
				// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
				s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
				s_tag.charset = 'utf-8';
				s_tag.onload = () => {
					resolve();
				}
				document.body.appendChild(s_tag);
			});
		}
	}
}
</script>
<style>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163