基于vue项目 vue-video-player实现rtmp hls视频流播放

视频直播 在线监控——基于vue项目 vue-video-player实现rtmp hls视频流播放

问题背景

现在很多后台管理系统都会在项目中添加实时监控/实时直播的功能，最近刚好遇到项目需求，于是就分享一下经验以及在配置过程中出现的一些问题的 解决方案 。

引入

这里省去vue项目环境的搭建：

1. 安装vue-vide-player 和 videojs-flash 两个包

npm install vue-video-player videojs-flash --save

2. 安装完成后能在package.json里查看到版本号
   
3. 接下来就在需要的页面里去引入这两个包

注意 vue-video-player 必须在 videojs-flash 之前引入 ，否则在解析的时候会出现不可预知的错误，另外最好引入默认样式

import "video.js/dist/video-js.css";
import {
   
    videoPlayer } from "vue-video-player";
import "videojs-flash";

搭建页面

1. 页面写点基础样式，楼主采用的是 d2 admin这套框架样式，所以在外层嵌套的标签是 ,大家在写的时候，最外层就用template标签嵌套就行了；

**核心标签就是 videoPlayer，其他样式仅供参考 vjs-custom-skin videoPlayer这两个class是默认的样式 记得写上 。:options=“数据源” **

<template>
  <d2-container>
    <div class="video-container"