Aliplayer視頻點播加密播放

Aliplayer視頻播放器填坑

aliplayer視頻點播分爲FlashHTML5兩個版本,移動端不支持Flash播放器。<br />Flash播放器兼容IE8+HTML5播發器支持比較新的瀏覽器,對瀏覽器的版本要求較Flash播放器對瀏覽器的版本的要求要高一些。<br />其中:<br />h5播放器在移動端不支持flvrtmp的播放<br />播放flvm3u8視頻,PC端支持的瀏覽器,須要啓用容許跨域訪問javascript

HLS標準加密與MPS私有加密對比

加密類型/設備環境 iOS Android PC
標準加密 HLS Chrome<br />Firefox<br />Safari<br />Edge<br />IE 11+for Windows8.1+
私有加密 MPS × Chrome for Android Chrome<br />Firefox<br />Safari<br />Edge<br />IE 11+for Windows8.1+

Aliplayer播放器Demo

注:Aliplayer在線配置網址<br />HTML代碼:css

<!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代碼:html

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

Vue中使用Aliplayer播發器

:如今index.html中引入aliplayercssjs,或者在當前vue文件中引入aliplayercssjshtml5

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

初始化aliplayer播發器java

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的私有加密播放方式!ios

相關文章
相關標籤/搜索