视频播放在我们得生活中已经是非常常见得情景了，而视频播放播放需要用到播放器，而阿里云就提供了 相关得播放器，简单得记录下Web端播放器-aliplayer。aliplayer的 Flash 模式已经停止更新。
支持格式（H5模式）
- 视频格式：mp4、m3u8、flv
- 视频编码：H.264
- 音频编码：AAC
- 音频格式：mp3
适配情况：(官方给出的说明)
使用方法：
需要在页面中引入相应的文件
- 引入js文件用于初始化播放器：https://g.alicdn.com/de/prismplayer/x.x.x/aliplayer-min.js（x.x.x为版本号，eg：2.8.2）
- H5版本的js：https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js
- 引入css文件：https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css
- 在页面中创建一个div标签
- 通过 new Aliplayer() 来实例化，该方法的第一个参数为一个对象，第二个为 callback，创建成功后就会调用该callback
参数列表：
- id：通过该参数来获取元素并进行实例化
- width：播放器的宽度
- autoplay：是否自动播放（在一些设备上可能不支持自动播放）
- source：播放地址
- cover：视频的封面图
- isLive：是否是直播
- controlBarVisibility：控制面板的出现方式(默认hover),值为 always 则不会消失
- skinLayout：配置一个功能的配置数组对象，不使用时为默认布局
skinLayout的一些配置：
- 每个对象里的参数
- name：为功能组件的名称
- align：组件的对齐方式，值为：cc 时居中，还可以为 tr,tl
- x,y：x，y 坐标当 align 为 cc 时可以不传
- bigPlayButton：大播放按钮
- controlBar：控制面板，还可以传 children 参数为一个数组对象
- 以下参数为 controlBar 中的 children 的配置
- progress：进度条
- playButton：播放按钮
- fullScreenButton：全屏按钮
- volume：音量
- timeDisplay：时间
在vue中使用阿里播放器-Aliplayer
在网上找了很多的相关资料和demo，但感觉和需求都有出入，而且不好改， 所以最终选择了这个大佬适配vue的Aliplayer。
地址：https://developer.aliyun.com/article/646391 直接复制代码到项目中就可以用。
根据需求在代码上做了一些改动：
- 因为不同的页面要用到播放器，有的时候播放器会创建两个video标签，导致很多的问题。 所以就将播放器的组件中的 created 的方法注释了，并在 index.html 页面中创建了一个 <script>，并添加 id 为 playerScriptTag
- 以及在播放器状态为 ready 时，给播放器绑定事件，使播放器能够点击视频而不点击控制栏的播放按钮就能改变 播放器的状态。
更新中.......