基于 Vue 的直播播放器实战

xcc3641 发布于2019-07-16 16:15 / 2203人阅读

摘要：直播协议首先，需要知道直播的常用协议，和，经过测试在七牛云直播平台不采用加速的情况下的延时在内，在。

前言

时下直播的盛行让很多人对直播技术产生浓厚的兴趣，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

到这里你的播放器就可以播放 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/

服务器托管云服务器基于webrtc的直播服务基于webrtc的直播系统基于webrtc的直播服务延时免费的播放器直播网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/34676.html

使用flv.js做直播

摘要：为什么要在这个时候探索做直播呢原因在于各大浏览器厂商已经默认禁用，之前常见的直播方案需要用户同意使用后才可以正常使用直播功能，这样的用户体验很致命。常见直播协议底层基于，在浏览器端依赖。不支持就使用播放器播流。为什么要在这个时候探索flv.js做直播呢？原因在于各大浏览器厂商已经默认禁用Flash，之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能，这样的...

myeveryheart 2019-07-16 16:16 评论0 收藏0
极速搭建RTMP直播流服务器+webapp (vue) 简单实现直播效果

摘要：极速搭建简单直播流服务器开发环境需要安装并启动如果是自己使用搭建直播服务器，毕竟是接触这个不到半天，还是有点复杂，编译设置有点繁琐。在尝试使用webRTC实现webapp直播失败后，转移思路开始另外寻找可行的解决方案。在网页上尝试使用webRTC实现视频的直播与看直播，在谷歌浏览器以及safari浏览器上测试是可行的。但是基于基座打包为webapp后不行，所以直播的话建议还是原生的好。HB...

番茄西红柿 2019-04-23 13:11 评论0 收藏0
[直播预告] Vue.js 实战之 Render 函数

摘要：月日周三晚点，在直播关于函数的课程，欢迎感兴趣的同学参加。在里，就是通过函数来实现的。课程介绍关于中函数的详解，及项目实战。 4月26日（周三）晚8点，在 SF 直播关于 Vue2 Render 函数的课程，欢迎感兴趣的同学参加。关于 Render React 和 Vue 2 都使用了 Virtual Dom 技术，Virtual Dom 并不是真正意义上的 DOM，而是一个轻量级的...

liuyix 2019-08-20 15:58 评论0 收藏0
新手福音！用vue-cli3从0到1做一个完整功能手机站（一）

摘要：开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。关注技术放肆聊跟小肆一起行动起来在这个项目中，小肆力争做到以下几点应用目前最新的技术，并随时间更新。开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的，这些知识点大多在网上都能找到但却没有哪个教程能都讲得到，那就由小肆来做吧。关注技术放肆聊,跟小肆一起行动起来！在这个项目中，小...

stefan 2019-08-23 14:43 评论0 收藏0
新手福音！用vue-cli3从0到1做一个完整功能手机站（一）

摘要：开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。关注技术放肆聊跟小肆一起行动起来在这个项目中，小肆力争做到以下几点应用目前最新的技术，并随时间更新。开篇从今天起，小肆将和大家从头开始做一个完整的实战项目。其中遇到的每个知识点都是我们工作中常见的，这些知识点大多在网上都能找到但却没有哪个教程能都讲得到，那就由小肆来做吧。关注技术放肆聊,跟小肆一起行动起来！在这个项目中，小...

Terry_Tai 2019-08-05 16:02 评论0 收藏0