起因

創(chuàng)新互聯(lián)公司2013年成立，先為綏寧等服務(wù)建站，綏寧等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為綏寧企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

最近公司想做一套視頻點(diǎn)播服務(wù)，因?yàn)榭紤]到成本問(wèn)題，領(lǐng)導(dǎo)希望一切都用開(kāi)源系統(tǒng)來(lái)完成?；谶@個(gè)出發(fā)點(diǎn)，那就肯定排除了各大云視頻平臺(tái)（騰訊云 音視頻點(diǎn)播VOD、網(wǎng)易云視頻、七牛云、阿里云 視頻服務(wù)等）。其實(shí)這里我還是建議購(gòu)買云視頻平臺(tái)，因?yàn)樽约涸燧喿涌隙](méi)有別人造的好（專門研發(fā)團(tuán)隊(duì)除外、以此業(yè)務(wù)為生的公司除外），再說(shuō)，云視頻平臺(tái)服務(wù)商提供的都是一整套解決方案：收集、存儲(chǔ)、轉(zhuǎn)碼、播放器等，并且在cdn和彈性擴(kuò)容上都能得到最大保障。

準(zhǔn)備

視頻點(diǎn)播最少需要兩樣?xùn)|西：流媒體服務(wù)、視頻播放器。 因?yàn)檫@是一篇講述前端播放器的帖子，關(guān)于流媒體服務(wù)的搭建我就pass了，以后有時(shí)間再補(bǔ)充新帖。

因?yàn)楣厩岸思軜?gòu)用的是vue全家桶，所以還是希望能夠找一款基于vue封裝的視頻播放器。

首先到vue社區(qū)找到了vue-dplayer,于是就install到本地測(cè)試了一下，這時(shí)候出現(xiàn)個(gè)問(wèn)題：此播放器在播放基于hls協(xié)議的m3u8文件時(shí)（視頻文件在流媒體服務(wù)已經(jīng)成功部署），在ios上能夠正常播放（自家協(xié)議支持良好），但是在pc的chrome上是不支持的。然后我去github上找了找資料，資料顯示Dplay（vue-dplayer就是依據(jù)Dplay封裝的）是支持hls的，只是需要引入hls.js，然后用hls對(duì)video對(duì)象進(jìn)行處理。因?yàn)閔ls.js與Dplayer示例代碼是針對(duì)video對(duì)象處理的，引入到項(xiàng)目中還需要修改vue-dplayer的一個(gè)屬性，時(shí)間緊迫，先放棄之（之后我會(huì)有一篇專門介紹Dplayer播放hls的帖子,已補(bǔ)充），轉(zhuǎn)身投入vue-video-player的懷抱。

為什么會(huì)用vue-video-player？

1. 我搭建的流媒體服務(wù)的管理頁(yè)面內(nèi)的播放器就是用的videoJs(vue-video-player是依據(jù)videoJs封裝的)，使用之后感覺(jué)良好。
2. 百度輸入“vue video”，vue-video-player就在頂部。（哈哈，就是這么隨意）
3. 當(dāng)然還是看了demo頁(yè)，支持的協(xié)議齊全。
4. 雖然vue-video-player的github上還有些issues沒(méi)有關(guān)閉，但是自己覺(jué)得守著videoJs強(qiáng)大的庫(kù)與萬(wàn)千使用者，總能解決問(wèn)題。（迷之自信?。?/p>

開(kāi)整

安裝依賴

npm install vue-video-player --save

引入樣式

// 第一個(gè)是videoJs的樣式，后一個(gè)是vue-video-player的樣式，因?yàn)榭紤]到我其他業(yè)務(wù)組件可能也會(huì)用到視頻播放，所以就放在了main.js內(nèi)
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

把VueVideoPlayer導(dǎo)入并掛在到vue上

//在main.js內(nèi)
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

編寫(xiě)業(yè)務(wù)組件 myPlayer.vue

注意：

1. video-player標(biāo)簽的class必須設(shè)置成“video-player vjs-custom-skin”，你引入的樣式才能起作用。我剛開(kāi)始做時(shí)，直接拷貝的github頁(yè)的代碼，那個(gè)代碼的class是video-player-box。
2. 根據(jù)videoJS Api修改屬性。我這里加了一些注釋，可以參考。
3. 修改src、poster屬性為你的服務(wù)器資源地址。

增加hls支持

//安裝依賴
npm install --save videojs-contrib-hls

//在main.js內(nèi)引入
require('videojs-contrib-hls/dist/videojs-contrib-hls');

啟動(dòng)服務(wù)，查看效果

npm run dev

videoJs的播放按鈕默認(rèn)為橢圓形，我個(gè)人有點(diǎn)不習(xí)慣，所以修改成了圓形。

增加css樣式

.video-js .vjs-big-play-button{
  /*
  播放按鈕換成圓形
  */
 height: 2em;
 width: 2em;
 line-height: 2em;
 border-radius: 1em;
 }

注意：

直接在 myPlayer.vue組件內(nèi)增加樣式會(huì)被覆蓋，不論你有沒(méi)有增加scoped屬性，這取決于vue加載樣式的順序，之前查資料看了一個(gè)帖子，講的很好，可惜找不著了。

我最終的解決方案是：自定義了一個(gè)css文件，使用require引入到了main.js內(nèi)，放在上述樣式引入之后。

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
require('@/../static/css/myVideoCss.css');

大bug: 播放按鈕與fastclick沖突

沖突是這樣的：播放器在手機(jī)瀏覽器或者chrome開(kāi)發(fā)者工具（手機(jī)尺寸）內(nèi)，點(diǎn)擊播放按鈕，播放與暫停事件會(huì)被觸發(fā)多次。

剛開(kāi)始不知道什么原因，在github上提了個(gè)issure，剛提完就發(fā)現(xiàn)上一個(gè)關(guān)閉的issure解決的就是這個(gè)問(wèn)題，這里得向作者道個(gè)歉，給您添堵了。哈哈。于是我看了另外一個(gè)人給的答案：與fastclick插件沖突……，但是….. 沒(méi)有解決方案。然后我嘗試注釋掉了fastclick，果然是它影響的。

然后我去fastclick github 地址看了看 ,頁(yè)面說(shuō)的很清楚，只要在觸發(fā)的元素上增加一個(gè)needsclick的class就可以了。

但是我試了好久都沒(méi)有成功。這時(shí)候看到了神貼，大體瀏覽了一下fastclick的源碼過(guò)程，并且作者提到“Fastclick 把 this.needsClick 放到了 ontouchEnd 末尾去執(zhí)行，才導(dǎo)致前面說(shuō)的加上了“needsclick”類名也無(wú)效的問(wèn)題?！彼晕蚁雵L試修改fastclick的源碼，并且驗(yàn)證一下。

我把整個(gè)faseclick.js拷貝了出來(lái)，并采用require的方式引用。

const FastClick = require('@/../static/js/fastclick.js');
FastClick.attach(document.body);

打開(kāi)代碼，猜想為什么needsclick沒(méi)有起到作用，所以就直接檢索了一下這個(gè)單詞，在 FastClick.prototype.needsClick方法的最后,有一個(gè)驗(yàn)證：

return (/\bneedsclick\b/).test(target.className);

首先FastClick.prototype.needsClick方法是判斷元素是否要保留穿透功能，而最后一行肯定是驗(yàn)證觸發(fā)的元素的class是不是含有needsclick。所以我先猜測(cè)是不是我觸發(fā)的元素沒(méi)有加上class,所以console了target.className：

果然沒(méi)有，并且發(fā)現(xiàn)一個(gè)規(guī)律，我需要控制的按鈕都是以vjs開(kāi)頭的，所以，在驗(yàn)證上再增加一個(gè)驗(yàn)證。

問(wèn)題解決，當(dāng)然解決問(wèn)題的方式暴力了一些，所以這里我希望看到并覺(jué)得此帖有幫助的同學(xué)能夠在此基礎(chǔ)上繼續(xù)補(bǔ)充完善。我就先趟到這。最后貼個(gè)版本

 "fastclick": "^1.0.6",
 "videojs-contrib-hls": "^5.12.2",
 "vue": "^2.2.2",
 "vue-router": "^2.2.0",
 "vue-video-player": "^4.0.6",

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。