起因

最近公司想做一套視頻點(diǎn)播服務(wù)，因?yàn)榭紤]到成本問(wèn)題，領(lǐng)導(dǎo)希望一切都用開源系統(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>

開整

安裝依賴

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í)開始回放。  muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。  loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。  preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）  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>