基于 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/