#Aliplayer 视频点播加密播放
预计阅读时间: 小于 1 分钟#前言
aliplayer 视频点播分为 Flash 和 HTML5 两个版本，移动端不支持 Flash 播放器。
Flash 播放器兼容 IE8+，HTML5播发器支持比较新的浏览器，对浏览器的版本要求较 Flash 播放器对浏览器的版本的要求要高一些。
其中：
h5播放器在移动端不支持 flv 和 rtmp 的播放；
播放flv、m3u8视频，PC端支持的浏览器，需要启用允许跨域访问
#HLS 标准加密与 MPS 私有加密对比
| 加密类型/设备环境 | iOS | Android | PC |
|---|---|---|---|
| 标准加密 HLS | √ | √ | Chrome、Firefox、Safari、Edge、IE 11+for Windows8.1+ |
| 私有加密 MPS | × | Chrome for Android | Chrome、Firefox、Safari、Edge、IE 11+for Windows8.1+ |
#Aliplayer 播放器 Demo
在线配置「🎾」
#HTML 代码
代码示例
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 <title>用户测试用例</title>
7 <!-- aliplayer样式表 -->
8 <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
9 <!-- aliplayer Flash版&HTML5版 -->
10 <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
11 <!-- Flash版 -->
12 <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js" type="text/javascript" charset="utf-8"></script>
13 <!-- HTML5版 -->
14 <script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js" type="text/javascript" charset="utf-8"></script>
15 </head>
16 <body>
17 <div class="prism-player" id="J_prismPlayer"></div>
18 </body>
19</html>#JavaScript 代码
代码示例
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);配置文档「📜」
Aliplayer 属性和接口使用说明「👈 点击访问」
#Vue 中使用 Aliplayer 播发器
注意「👀」
现在 index.html 中引入 aliplayer 的 css 和 js，或者在当前 vue 文件中引入 aliplayer 的 css 和js。
代码示例
1<template>
2 ...
3 <!-- 引入aliplayer播放器 -->
4 <div class="prism-player" id="player-con"></div>
5 ...
6</template>#初始化aliplayer 播发器
代码示例
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};注意「👀」
播放器中隐藏了画中画、画质切换、视频下载等功能。
目 录