项目中用到VueCLI3.0与直播控件Aliplayer的集成，在项目中遇到了许多坑，下面来介绍VueCLI3.0集成Aliplayer的过程和方法，并对其中遇到的问题和解决方法做出进一步阐释，希望看到此文的朋友们可以少走些弯路。

概念解析

VueCLI3.0是vue的脚手架工具，此脚手架工具集成vuex、vue-router、webpack和axios等前端实用工具，可快速搭建项目原型。

Aliplayer是阿里云web视频播放器，是阿里视频云端到云端服务的重要一环，该视频播放器支持点播和直播等基础功能，除此之外同样支持视频的加密播放、清晰度切换、直播时移等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。

阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术。目前rtmp直播流仅flash模式支持。

flash模式

视频格式： mp4、flv、m3u8、rtmp

视频编码： H.264

音频编码： AAC、MP3

音频格式：MP3

html5模式

视频格式： mp4、m3u8、flv

视频编码： H.264

音频编码： AAC

音频格式： mp3

安装vue-aliplayer插件

	npm install vue-aliplayer –S

1. 引入vue-aliplayer库文件。

	import VueAliplayer from 'vue-aliplayer'	export default {	 components: {	 'ali-player': VueAliplayer	 },	}

2. 引入组件，添加按钮组

	<ali-player 	 class="aliplayer"	 ref="player"	 width="500px" 	 height="400px" 	 controlBarVisibility="hover"	 :source="url" >	 </ali-player>	 <button @click="play">播放</button>	 <button @click="pause">暂停</button>	 <button @click="replay">重播</button>	methods: {	 play(){	 const player = this.$refs.player.instance	 player && player.play()	 },	 pause() {	 const player = this.$refs.player.instance	 player && player.pause()	 },	 replay() {	 const player = this.$refs.player.instance	 player && player.replay()	 }	 }

3. 效果图

通过vue-aliplayer搭建的播放器大家会发现一个问题，就是播放器内部没有集成按钮组，需要在播放器外部重写按钮组并调用方法来控制，实际项目中发现这样有些麻烦，我们也可以用另外一种方法引入aliplayer。

1.通过cdn引入aliplayer

在index.html文件引入css和js库文件

	<link rel="stylesheet" href="" />	 <script type="text/javascript" charset="utf-8" src=""></script>

2.创建容器

	<div id='aliPlayer' class="aliplayer"></div>

3.初始化播放器

	initAliplayer(){	 this.aliplayer = new Aliplayer({	 id: 'aliPlayer',	 width: '400px',	 height: '300px',	 source: "//player.alicdn.com/video/aliyunmedia.mp4",	 controlBarVisibility: 'always',	 autoplay: false,//自动播放	 isLive: false,//直播	 preload: false//播放器自动加载	 }, function (player) {	 //player.play();	 window.console.log("player");	 });	 }

 this.aliplayer.on("ready", function () { window.console.log("ready"); }); this.aliplayer.on("pause", function () { window.console.log("pause"); }); this.aliplayer.on("play", function () { window.console.log("play"); }); this.aliplayer.on("waiting", function () {//解决视频播放时缓冲的问题 window.console.log("waiting"); }); this.aliplayer.on("playing", function () { window.console.log("playing"); }); this.aliplayer.on("completeSeek", function (seconds) {//视频进度条拖动事件 window.console.log('completeSeek'); }); this.aliplayer.on("timeupdate", function () {// window.console.log("timeupdate"); }); this.aliplayer.on("ended", function () { window.console.log("ended"); });

1.视频直播已经设置了isLive: true，但是播放器初始化后不能自动播放。

这个问题是比较坑的，检查配置参数没有问题，然后视频的直播流也没有问题，视频直播流采用阿里云的rtmp格式，在阿里云上可以正常播放，但是实际测试还是无法初始化时自动播放，最后在浏览器控制台的警告信息里找到了问题的原因，播放器的宽高比不满足要求，最后设置宽高比为4:3，终于ok了。

2.隐藏播放器内置按钮组的部分按钮。

实际项目中如果想隐藏掉播放器内置的按钮，有两种方法。

皮肤自定义，自定义skinLayout属性， 去掉整个controlBar或者controlBar下面的子项， 比如progress，直接隐掉就可以。

	skinLayout: [ 	 {name: "bigPlayButton", align: "blabs", x: 30, y: 80},	 {	 name: "H5Loading", align: "cc"	 },	 {	 name: "controlBar", align: "blabs", x: 0, y: 0,	 children: [	 //{name: "progress", align: "tlabs", x: 0, y: 0},	 {name: "playButton", align: "tl", x: 15, y: 26},	 {name: "timeDisplay", align: "tl", x: 10, y: 24},	 {name: "fullScreenButton", align: "tr", x: 20, y: 25},	 {name: "volume", align: "tr", x: 20, y: 25},	 ]	 }	 ]

	/* aliplayer */	.prism-setting-btn{	 display: none !important;	}	.prism-cc-btn{	 display: none !important;	}	.prism-speed-selector{	 display: none !important;	}	.prism-volume{	 display: none !important;	}

隐藏部分按钮

3. 播放flv格式数据源跨域问题

当出现下面错误时，需要启用播放域名允许跨域访问,

	No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘‘ is therefore not allowed access.

添加允许跨域访问的header，值为播放视频网站的域名，比如网站为, 那么值就为.

CDN设置跨域访问()。

Http访问控制CORS的详解()。

其他关于阿里播放器sdk相关问题，详见阿里云官方文档，属性和接口相关说明（）。