阿里云播放器

简单描述阿里云web视频播放，首先引用阿里云的链接

<script  type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />

然后创建阿里云播放器，我用的是加密播放的凭证播放，但要注意，ios不支持凭证播放，需要判断是ios和安卓用不同的播放方式，我在ios才用的是m3u8的格式

<div class="video-con" id="player-con">
// 初始化播放器
_initPlayer(vid, playauth) {
	let _this = this;
	if (!this.player) {
		this.player = new Aliplayer(
			{
				id: 'player-con',
				autoplay: 1,
				isLive: 0,
				width: '100%',
				height: '400px',
				controlBarVisibility: 'hover',
				useH5Prism: true,
				useFlashPrism: false,
				vid: vid,
				encryptType: 1,
				playauth: playauth,
				cover: ''
			},
			function(player) {
				console.log('播放器创建好了。');
				_this.isInitPlayer = true;//创建好播放器设置为true
			}
		);
		// 订阅事件根据自己的需求订阅
		_this.player.on('pause', function() {
			console.log('暂停了');
		});
		_this.player.on('ended', function() {
			console.log('结束了');
		});

		_this.player.on('play', function() {
			console.log('开始播放');
		});
		_this.player.on("timeupdate", function() {
			let speed = Math.ceil(_this.player.getCurrentTime());
			let videotime = Number(_this.player.getDuration());			
		});
	} else {
		// 存在播放器实例则先销毁组件
		this.player.dispose();
		// 将播放器实例重置
		this.player = null;
		// 清空播放器 DOM 内容
		document.getElementById('player-con').innerHTML = '';
		// console.log("再次初始化");
		// 再次初始化
		this._initPlayer(vid, playauth);
	}
},

关于阿里云视频切换播放视频才用官方提供的方式就可以了

if (this.isInitPlayer) {
	console.log("不在初始化");
	this.player.replayByVidAndPlayAuth(
		soninfo.key,
		soninfo.playauth
	);
} else {
	console.log("初始化");
	this._initPlayer(vid, playauth);
}