項目中用到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插件

\tnpm install vue-aliplayer –S

創建aliplayer.vue組件

1. 引入vue-aliplayer庫文件

\timport VueAliplayer from 'vue-aliplayer'
\texport default {
\t components: {
\t 'ali-player': VueAliplayer
\t },
\t}

2. 引入組件，添加按鈕組

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

3. 效果圖

通過vue-aliplayer搭建的播放器大家會發現一個問題，就是播放器內部沒有集成按鈕組，需要在播放器外部重寫按鈕組並調用方法來控制，實際項目中發現這樣有些麻煩，我們也可以用另外一種方法引入aliplayer。

1.通過cdn引入aliplayer

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

\t<link>
\t 

2.創建容器

\t

3.初始化播放器

\tinitAliplayer(){
\t this.aliplayer = new Aliplayer({
\t id: 'aliPlayer',
\t width: '400px',
\t height: '300px',
\t source: "//player.alicdn.com/video/aliyunmedia.mp4",
\t controlBarVisibility: 'always',
\t autoplay: false,//自動播放
\t isLive: false,//直播
\t preload: false//播放器自動加載 

\t }, function (player) {
\t //player.play();
\t window.console.log("player");
\t });
\t }

• 控制播放器的方法

 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，直接隱掉就可以。

\tskinLayout: [ 
\t {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
\t { 

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

• 使用css的樣式覆蓋。

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

隱藏部分按鈕

3. 播放flv格式數據源跨域問題

當出現下面錯誤時，需要啟用播放域名允許跨域訪問,

\tNo ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000‘ is therefore not allowed access.

添加允許跨域訪問的header，值為播放視頻網站的域名，比如網站為https://www.aliyun.com/, 那麼值就為https://www.aliyun.com/.

CDN設置跨域訪問(https://help.aliyun.com/knowledge_detail/40183.html?spm=a2c4g.11186623.2.16.23d24c07n8MhuN)。

Http訪問控制CORS的詳解(https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS?spm=a2c4g.11186623.2.17.23d24c07n8MhuN)。

其他關於阿里播放器sdk相關問題，詳見阿里雲官方文檔，屬性和接口相關說明（https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1077.dd406782XBDswh）。