使用vue-video-player实现直播

课前准备：直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html

摘要：在H5页面实现观看直播+视频回放；在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件—— vue-video-player

场景：

移动端H5页面，项目是vue搭建的，使用的是HLS协议以m3u8结尾的直播流

一、安装 vue-video-player

播放HLS视频流需要安装 videojs-contrib-hls插件，播放RTMP视频流则安装 videojs-flash插件，hls插件与flash插件同时使用时flash插件需要在hls插件之前引入；（资料上讲安装vue-video-player时会自动安装hls插件，实际操作中并没有，还是自己手动安装吧！）

安装方式1:

CDN方式，直接在html文件头部引入文件:
　　
　　<script type="text/javascript" src="path/to/video.min.js"></script>
　　<script type="text/javascript" src="path/to/vue.min.js"></script>
　　<script type="text/javascript" src="path/to/dist/vue-video-player.js">
　　</script>
　　　　<script type="text/javascript"> Vue.use(window.VueVideoPlayer)
　　</script>

安装方式2:

NMP安装插件:
　　npm install vue-video-player --save
    npm install videojs-contrib-hls --save

main.js中引入基础样式文件:
// 引入videoPlayer样式
import 'video.js/dist/video-js.css'
    

按需引入：
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'

components: {
    videoPlayer
},    
 
全局引入:
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player' 
// 自定义样式引入，在添加对应类名，例如video-player-custom
// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* { 
　 options: 全局默认配置,
   events: 全局videojs事件
}*/)

二、使用 vue-video-player

<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
  　components: {
        videoPlayer
    },
　　data() { 
　　　　return {
 　　　　　　playerOptions: { 
　　　　　　　　　// 是否静音
                  muted: true,
                  // 默认为英语，设置为中文
                  language: 'zh-CN',
                  // 播放速度，指定后Video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户选择播放速度
                  playbackRates: [0.5, 1.0, 1.5, 2.0],
                  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例
                  aspectRatio: '4:3',
         　　　　 // 兼容顺序，默认值是['html5']，其他已注册的技术将按其注册的顺序在该技术之后添加。
                  techOrder: ['html5'],
                  // 等同于原生