#Aliplayer 视频加密播放

1var player = new Aliplayer(
2	{
3		id: "J_prismPlayer",
4		width: "100%",
5		autoplay: true,
6		//支持播放地址播放,此播放优先级最高
7		source: "播放url",
8
9		//播放方式二：点播用户推荐
10		vid: "",
11		playauth: "ddd",
12		cover: "logo.png",
13
14		//播放方式三：仅MPS用户使用（私有加密播放）
15		vid: "",
16		accId: "dd",
17		accSecret: "dd",
18		stsToken: "dd",
19		domainRegion: "dd",
20		authInfo: "dd",
21
22		//播放方式四：使用STS方式播放
23		vid: "",
24		accessKeyId: "dd",
25		securityToken: "dd",
26		accessKeySecret: "dd",
27		region: "cn-shanghai"
28	},
29	function (player) {
30		console.log("播放器创建好了。");
31	}
32);

1export default {
2	data() {
3		return {
4			player: {},
5			timer: null
6		};
7	},
8	created() {
9		this.loading = this.$loading({
10			background: "rgba(0, 0, 0, 0.5)",
11			text: "拼命加载中"
12		});
13	},
14	methods: {
15		// 销毁和重建aliplayer
16		changePlayer(dt) {
17			this.player.dispose();
18			this.initPlayer(dt);
19		},
20		// 获取视频播放信息
21		getKeyInfo(videoId, flag) {
22			this.$axios
23				.post(
24					"XXXXXToken",
25					qs.stringify({
26						videoId
27					})
28				)
29				.then(res => {
30					let data = res.data;
31					if (data.code == 1) {
32						let dt = data.result_data;
33						// 是否初次创建？初次创建播放器：销毁和重建播发器
34						flag ? this.initPlayer(dt) : this.changePlayer(dt);
35					}
36				});
37		},
38		// 初始化视频播放器
39		initPlayer(data) {
40			// 清空dom节点
41			document.getElementById("player-con").innerHTML = "";
42			// 改变this指向，使其指向当前this指向。
43			let _this = this,
44				token = sessionStorage.getItem("token"),
45				userId = sessionStorage.getItem("userId"),
46				isConfirm = sessionStorage.getItem("isConfirm");
47			this.player = new Aliplayer(
48				{
49					id: "player-con", // 播放器id
50					format: "m3u8", // 视频格式
51					width: "100%",
52					height: "450px",
53					playsinline: true,
54					preload: true,
55					encryptType: 1,
56					// HLS标准加密为0（默认）,MPS私有视频加密为1
57					controlBarVisibility: "always",
58					useH5Prism: true,
59					// 视频底部状态工具栏设置，默认为false，全显示
60					skinLayout: [
61						{
62							name: "bigPlayButton",
63							align: "blabs",
64							x: 30,
65							y: 80
66						},
67						{
68							name: "H5Loading",
69							align: "cc"
70						},
71						{
72							name: "errorDisplay",
73							align: "tlabs",
74							x: 0,
75							y: 0
76						},
77						{
78							name: "infoDisplay"
79						},
80						{
81							name: "tooltip",
82							align: "blabs",
83							x: 0,
84							y: 56
85						},
86						{
87							name: "thumbnail"
88						},
89						{
90							name: "controlBar",
91							align: "blabs",
92							x: 0,
93							y: 0,
94							children: [
95								{
96									name: "progress",
97									align: "blabs",
98									x: 0,
99									y: 44
100								},
101								{
102									name: "playButton",
103									align: "tl",
104									x: 15,
105									y: 12
106								},
107								{
108									name: "timeDisplay",
109									align: "tl",
110									x: 10,
111									y: 7
112								},
113								{
114									name: "fullScreenButton",
115									align: "tr",
116									x: 10,
117									y: 12
118								},
119								{
120									name: "volume",
121									align: "tr",
122									x: 5,
123									y: 10
124								}
125							]
126						}
127					],
128					// MPS
129					vid: "vid",
130					accId: "accId",
131					accSecret: "accSecret",
132					stsToken: "stsToken",
133					domainRegion: "cn-beijing",
134					authInfo: '{"ExpireTime": "' + expireTime + '","MediaId": "' + videoId + '","Signature": "' + signature + '"}'
135				},
136				function (player) {
137					// html5版本的视频事件写在当前callback中
138					player.play();
139
140					// 定时器
141					let clear = () => {
142						if (_this.timer) {
143							clearTimeout(_this.timer);
144							_this.timer = null;
145						}
146					};
147
148					// 获取播放时间
149					let getTimes = () => {
150						if (player.getCurrentTime() >= 60) {
151							if (isConfirm == 0) {
152								player.pause();
153								player.fullscreenService.cancelFullScreen();
154							}
155						}
156						// 递归回调，计算播放时间
157						_this.timer = setTimeout(getTimes, 1000);
158					};
159
160					player.on("ready", function (e) {
161						// 首次播放
162						clear();
163						getTimes();
164						player.on("play", function (e) {
165							// 播放视频
166							clear();
167							getTimes();
168						});
169						player.on("pause", function (e) {
170							// 暂停视频播放
171							clear();
172						});
173						player.on("ended", function (e) {
174							// 视频播放结束
175							clear();
176						});
177						player.on("error", function (e) {
178							// 视频播放失败
179							clear();
180						});
181					});
182				}
183			);
184		},
185		// 切换视频播放源：使用函数截流，防止多次触发影响数据展示
186		switchVideo: Debounce(function (index, videoId, isPerchase) {
187			this.mark = index;
188			this.getKeyInfo(videoId);
189			this.isPerchase = isPerchase == undefined ? true : isPerchase;
190		}, 500)
191	},
192	// 生命周期钩子函数：销毁
193	destroyed() {
194		// 清除定时器
195		clearInterval(this.timer);
196		this.timer = null;
197		let play = this.player,
198			len = Object.keys(play);
199		if (!len) return;
200		// 销毁播放器
201		play.dispose();
202	}
203};