基於 Vue 的直播播放器實戰

前言

時下直播的盛行讓不少人對直播技術產生濃厚的興趣，orange 本人也不例外，本文藉着實戰的目的完成一個 demo，並無深刻的講解直播技術的實現原理以及推流和拉流的實現，爲何不深刻講解直播的底層技術，緣由很簡單大公司不必看個人文章去了解如何搭建直播服務器，小企業又沒有不要去搭建本身的直播服務器，由於涉及到的技術繁雜又瑣碎，感興趣的直接谷歌，各位大神有不一樣深度的講解怎麼去搭建本身的直播服務器，那麼小企業人員、資金和技術有限怎麼辦，沒錯！買服務！！！

直播雲服務也是今年的一個亮點，各大雲平臺都在作直播的服務，至於快慢選擇的話 orange 只用過七牛雲直播，沒辦法拿數據給你們建議

七牛的文檔給的比較詳細，如何得到本身的直播空間，如何綁定備案域名，如何解析域名，如何建立直播間以及整個的工做流程先上七牛官網，其次看 github 上的庫

整個過程相信你們都能順利完成，說到咱們的播放器拉流，那麼播放的來源怎麼獲取呢？有安卓和ios開發經驗的能夠用移動端推流，沒有經驗的也沒關係推薦一個鬥魚的 OBS 教程

注：以上的直播空間的搭建沒有完成也能夠看本文，更但願你們能夠作成一個完整的 demo，咱們的重點仍是在於播放器的實現。

直播協議

首先，須要知道直播的經常使用協議，RTMP 和 HLS，通過測試在七牛雲直播平臺不採用加速的狀況下 RTMP 的延時在 10s 內，HLS 在 10-20s。通過優化後的還沒測試過。

至於這兩個協議的選擇還須要根據實際狀況而定（只看延時大小是不對滴），仍是給連接直播協議的選擇：RTMP vs. HLS

Vue 結合

作過 H5 播放器的對與 video.js 並不陌生，實現的出發點也是在 video.js 上，默認你們都有 Vue 搭建和簡單運用能力了，沒有經驗的能夠看 orange 以前寫的入門文章。

首先咱們要新建一個組件，這個組件就是播放器的組件，組件名隨意，最初的想法是直接使用 video.js，可是踩的坑比較深因此不推薦直接使用。

坑：首次載入不會有問題，路由跳轉後再回來若是不刷新頁面，import 進來的 videojs 並不會執行，因此須要在 mounted 裏執行 videojs() 函數，而後傳對應的參數進去，最後須要加入下面代碼防止監聽函數在切換路由後繼續執行。

beforeDestroy: function() {
  this.dispose()
}

坑也踩完了，因而逛了一圈 github，發現了一個項目叫 vue-video-player

先安裝依賴

npm install vue-video-player --save

引用依賴

// import with ES6
import Vue from 'vue'
...
import VideoPlayer from 'vue-video-player'


// require with Node.js/Webpack
var Vue = require('vue')
...
var VideoPlayer = require('vue-video-player')

// The default is to turn off some of the features, you can choose according to their use of certain features enabled, do not enable the introduction will not require the corresponding file. 默認有些功能是不開啓的，好比youtube國內不能用，則默認是關閉的，若是不啓用對應的功能，則不會引入對應的包，減小項目代碼體積，固然也有可能意味着對應的功能可能會出錯，true 是開啓，false是關閉，正常狀況使用者不須要care就能夠。

// Example(Only applies to the current global mode). 用配置項的話僅支持全局模式來配置，不然不會生效
VideoPlayer.config({
  youtube: true, // default false
  switcher: false, // default true
  hls: false // default true
})

// use
Vue.use(VideoPlayer)

// --------------------------------------

// or use with component(ES6)
import Vue from 'vue'
// ...
import { videoPlayer } from 'vue-video-player'

// use
export default {
  components: {
    videoPlayer
  }
}

HLS

這裏默認給出了 HLS 的方案，咱們先去全局引入，到 main.js

import VideoPlayer from 'vue-video-player';

VideoPlayer.config({
  youtube: true,
  switcher: true,
  hls: true
})

Vue.use(VideoPlayer)

下面看下個人 component

<template>
  <video-player :options="videoOptions"></video-player>
</template>

<script>
export default {
  name: 'Play',
  data () {
    return {
      videoOptions: {
        source: {
          type: "application/x-mpegURL",
          src: 'https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8',
          withCredentials: false
        },
        language: 'zh-CN',
        live: true,
        autoplay: true,
        height: 540
      }
    }
  }
}
</script>

到這裏你的播放器就能夠播放 HLS 連接了

RTMP

上面說到庫底層仍是依賴 video.js， 因此呢咱們不妨直接這樣使用

export default {
  name: 'Play',
  data () {
    return {
      videoOptions: {
        source: {
          type: "rtmp/mp4",
          src: 'rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4',
          withCredentials: false
        },
        language: 'zh-CN',
        live: true,
        autoplay: true,
        height: 540
      }
    }
  }
}

總結

兩種方法都可嘗試，上面給出的 src 換成本身的連接就實現拉流播放啦，固然你若是不用 vue 的話也不要緊，直接參照 video.js 的官網，單是 RTMP 的話不須要第三方庫，若是是 HLS 的話須要引入videojs-contrib-hls，看具體狀況而定。

文章出自 orange 的 我的博客 http://orangexc.xyz/