詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程

起因

創(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)題。（迷之自信啊）

開(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);

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

<template>
 <div class="container">
 <div class="player">
  <video-player class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
  >
  </video-player>
 </div>
 </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
export default {
 data () {
 return {
  playerOptions: {
//  playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
  autoplay: false, //如果true,瀏覽器準(zhǔn)備好時(shí)開(kāi)始回放。
  muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。
  loop: false, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。
  preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開(kāi)始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開(kāi)始加載視頻（如果瀏覽器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
  fluid: true, // 當(dāng)true時(shí)，Video.js player將擁有流體大小。換句話說(shuō)，它將按比例縮放以適應(yīng)其容器。
  sources: [{
   type: "application/x-mpegURL",
   src: "video.m3u8" //你的m3u8地址（必填）
  }],
  poster: "poster.jpg", //你的封面地址
  width: document.documentElement.clientWidth,
  notSupportedMessage: '此視頻暫無(wú)法播放，請(qǐng)稍后再試', //允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。
//  controlBar: {
//   timeDivider: true,
//   durationDisplay: true,
//   remainingTimeDisplay: false,
//   fullscreenToggle: true //全屏按鈕
//  }
  }
 }
 },
 components: {
 videoPlayer
 },
 methods: {
 onPlayerPlay(player) {
  alert("play");
 },
 onPlayerPause(player){
  alert("pause");
 },
 },
 computed: {
 player() {
  return this.$refs.videoPlayer.player
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
 .container {
 background-color: #efefef;
 min-height: 100%;
 }
</style>

注意：

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)。

網(wǎng)站標(biāo)題：詳解vue2.0+vue-video-player實(shí)現(xiàn)hls播放全過(guò)程
網(wǎng)站URL：http://muchs.cn/article38/ppjssp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站收錄、品牌網(wǎng)站制作、做網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)