起因

最近公司想做一套視頻點播服務，因為考慮到成本問題，領導希望一切都用開源系統來完成。基于這個出發點，那就肯定排除了各大云視頻平臺（騰訊云 音視頻點播VOD、網易云視頻、七牛云、阿里云 視頻服務等）。其實這里我還是建議購買云視頻平臺，因為自己造輪子肯定沒有別人造的好（專門研發團隊除外、以此業務為生的公司除外），再說，云視頻平臺服務商提供的都是一整套解決方案：收集、存儲、轉碼、播放器等，并且在cdn和彈性擴容上都能得到最大保障。

準備

視頻點播最少需要兩樣東西：流媒體服務、視頻播放器。 因為這是一篇講述前端播放器的帖子，關于流媒體服務的搭建我就pass了，以后有時間再補充新帖。

因為公司前端架構用的是vue全家桶，所以還是希望能夠找一款基于vue封裝的視頻播放器。

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

為什么會用vue-video-player？

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

開整

安裝依賴

npm install vue-video-player --save

引入樣式

// 第一個是videoJs的樣式，后一個是vue-video-player的樣式，因為考慮到我其他業務組件可能也會用到視頻播放，所以就放在了main.js內require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')

把VueVideoPlayer導入并掛在到vue上

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

編寫業務組件 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,瀏覽器準備好時開始回放。  muted: false, // 默認情況下將會消除任何音頻。  loop: false, // 導致視頻一結束就重新開始。  preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）  language: 'zh-CN',  aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）  fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。  sources: [{   type: "application/x-mpegURL",   src: "video.m3u8" //你的m3u8地址（必填）  }],  poster: "poster.jpg", //你的封面地址  width: document.documentElement.clientWidth,  notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。//  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>