Aliplayer视频点播加密播放

Aliplayer视频播放器填坑

aliplayer视频点播分为FlashHTML5两个版本,移动端不支持Flash播放器。
Flash播放器兼容IE8+HTML5播发器支持比较新的浏览器,对浏览器的版本要求较Flash播放器对浏览器的版本的要求要高一些。
其中:
h5播放器在移动端不支持flvrtmp的播放
播放flvm3u8视频,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

注:Aliplayer在线配置网址
HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>用户测试用例</title>
		<!-- aliplayer样式表 -->
		<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
		<!-- aliplayer Flash版&HTML5版 -->
		<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
		<!-- Flash版 -->
		<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js" type="text/javascript" charset="utf-8"></script>
		<!-- HTML5版 -->
		<script src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="prism-player" id="J_prismPlayer"></div>
	</body>
</html>

JavaScript代码:

var player = new Aliplayer({
	id: 'J_prismPlayer',
	width: '100%',
	autoplay: true,
	//支持播放地址播放,此播放优先级最高
	source: '播放url',
	
	//播放方式二:点播用户推荐
	vid: '',
	playauth: 'ddd',
	cover: 'logo.png',
	
	//播放方式三:仅MPS用户使用(私有加密播放)
	vid: '',
	accId: 'dd',
	accSecret: 'dd',
	stsToken: 'dd',
	domainRegion: 'dd',
	authInfo: 'dd',
	
	//播放方式四:使用STS方式播放
	vid: '',
	accessKeyId: 'dd',
	securityToken: 'dd',
	accessKeySecret: 'dd',
	region: 'cn-shanghai',
}, function(player) {
	console.log('播放器创建好了。')
});

注:aliplayer属性和接口使用说明

Vue中使用Aliplayer播发器

:现在index.html中引入aliplayercssjs,或者在当前vue文件中引入aliplayercssjs

<template>
  ...
  <!-- 引入aliplayer播放器 -->
  <div class="prism-player" id="player-con"></div>
  ...
</template>

初始化aliplayer播发器

export default {
	data() {
		return {
			player: {},
			timer: null
		};
	},
	created() {
		this.loading = this.$loading({
			background: "rgba(0, 0, 0, 0.5)",
			text: "拼命加载中"
		});
	},
	methods: {
		// 销毁和重建aliplayer
		changePlayer(dt) {
			this.player.dispose();
			this.initPlayer(dt);
		},
		// 获取视频播放信息
		getKeyInfo(videoId, flag) {
			this.$axios.post(
				"XXXXXToken",
				qs.stringify({
					videoId
				})
			).then(res => {
				let data = res.data;
				if (data.code == 1) {
					let dt = data.result_data;
					// 是否初次创建?初次创建播放器:销毁和重建播发器
					flag ? this.initPlayer(dt) : this.changePlayer(dt);
				}
			});
		},
		// 初始化视频播放器
		initPlayer(data) {
			// 清空dom节点
			document.getElementById("player-con").innerHTML = "";
			// 改变this指向,使其指向当前this指向。
			let _this = this,
				token = sessionStorage.getItem("token"),
				userId = sessionStorage.getItem("userId"),
				isConfirm = sessionStorage.getItem("isConfirm");
			this.player = new Aliplayer({
					id: "player-con", // 播放器id
					format: "m3u8", // 视频格式
					width: "100%",
					height: "450px",
					playsinline: true,
					preload: true,
					encryptType: 1,
					// HLS标准加密为0(默认),MPS私有视频加密为1
					controlBarVisibility: "always",
					useH5Prism: true,
					// 视频底部状态工具栏设置,默认为false,全显示
					skinLayout: [{
							name: "bigPlayButton",
							align: "blabs",
							x: 30,
							y: 80
						},
						{
							name: "H5Loading",
							align: "cc"
						},
						{
							name: "errorDisplay",
							align: "tlabs",
							x: 0,
							y: 0
						},
						{
							name: "infoDisplay"
						},
						{
							name: "tooltip",
							align: "blabs",
							x: 0,
							y: 56
						},
						{
							name: "thumbnail"
						},
						{
							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: "timeDisplay",
									align: "tl",
									x: 10,
									y: 7
								},
								{
									name: "fullScreenButton",
									align: "tr",
									x: 10,
									y: 12
								},
								{
									name: "volume",
									align: "tr",
									x: 5,
									y: 10
								}
							]
						}
					],
					// MPS
					vid: 'vid',
					accId: 'accId',
					accSecret: 'accSecret',
					stsToken: 'stsToken',
					domainRegion: "cn-beijing",
					authInfo: '{"ExpireTime": "' +
						expireTime +
						'","MediaId": "' +
						videoId +
						'","Signature": "' +
						signature +
						'"}'
				},
				function(player) {
					// html5版本的视频事件写在当前callback中
					player.play();

					// 定时器
					let clear = () => {
						if (_this.timer) {
							clearTimeout(_this.timer);
							_this.timer = null;
						}
					};

					// 获取播放时间
					let getTimes = () => {
						if (player.getCurrentTime() >= 60) {
							if (isConfirm == 0) {
								player.pause();
								player.fullscreenService.cancelFullScreen();
							}
						}
						// 递归回调,计算播放时间
						_this.timer = setTimeout(getTimes, 1000);
					};

					player.on("ready", function(e) {
						// 首次播放
						clear();
						getTimes();
						player.on("play", function(e) {
							// 播放视频
							clear();
							getTimes();
						});
						player.on("pause", function(e) {
							// 暂停视频播放
							clear();
						});
						player.on("ended", function(e) {
							// 视频播放结束
							clear();
						});
						player.on("error", function(e) {
							// 视频播放失败
							clear();
						});
					});
				}
			);
		},
		// 切换视频播放源:使用函数截流,防止多次触发影响数据展示
		switchVideo: Debounce(function(index, videoId, isPerchase) {
			this.mark = index;
			this.getKeyInfo(videoId);
			this.isPerchase = isPerchase == undefined ? true : isPerchase;
		}, 500)
	},
	// 生命周期钩子函数:销毁
	destroyed() {
		// 清除定时器
		clearInterval(this.timer);
		this.timer = null;
		let play = this.player,
			len = Object.keys(play);
		if (!len) return;
		// 销毁播放器
		play.dispose();
	}
};

注:播放器中隐藏了画中画、画质切换、视频下载等功能。
同时需要注意的是,aliplayerH5视频点播 在iOS移动端是不支持的,苹果移动端不支持aliplayer的私有加密播放方式!

Aliplayer视频点播加密播放

全文结束