視頻播放在我們得生活中已經是非常常見得情景了，而視頻播放播放需要用到播放器，而阿里雲就提供了 相關得播放器，簡單得記錄下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 時，給播放器綁定事件，使播放器能夠點擊視頻而不點擊控制欄的播放按鈕就能改變 播放器的狀態。
更新中.......