# vxg-player

**Repository Path**: cooljoker/vxg-player

## Basic Information

- **Project Name**: vxg-player
- **Description**: 使用浏览器插件vxg-player播放rtsp视频
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/cooljoker
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2021-09-27
- **Last Updated**: 2023-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vxg-player

#### 介绍
> 目前有一个关于接入海康监控进行视频融合的项目需求，按理说在前端技术发展如此迅速的今天，使用web播放一个视频应该是不算什么难事，只是万事都有意外，因很多视频厂家的监控数据都不是普通的mp4啥的，所以使用普通的object 或者video 是播放不了的，必须需要一些额外的插件进行支持，今天我们就来加载一个rtsp格式的视频

### 一、安装合适的浏览器

首选安装一个合适的浏览器,我选择的是`72.0.3626.119`版本的（因插件不支持高版本chrome）

也可以安装`60.0.3080`版本的（只是我试过后来的cesium不支持过低版本浏览器）所以最后决定使用了`72.0.3626.119`版本的

`72.0.3626.119`版本浏览器资源[云盘下载](https://pan.baidu.com/s/1-I7Qr88SMIeK1XJUZDopUw)提取码: 8bha

`60.0.3080`版本浏览器资源[云盘下载](https://pan.baidu.com/s/19c0ENxRZMI-Lgsk-IwAdcw)提取码: oy20

这里安装低版本浏览器需要注意的是要设置一下不允许自动更新，否则安装成功后浏览器自动会更新为最新版本

![设置禁止更新](https://img-blog.csdnimg.cn/20200420212329900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70)

### 二、安装VXG Media Player

![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/132858_cd39506d_5380040.png "1632719813965.png")



通过浏览器扩展插件，点击加载已解压的扩展程序（就是一步解压的文件目录）

![åŠ è½½å·²è§£åŽ‹çš„æ‰©å±•ç¨‹åº](https://img-blog.csdnimg.cn/20200420213223591.png)

### 三、下载vxgPlayer插件

![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/132921_460c980d_5380040.png "1632719888379.png")

加载到项目中如下

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200420214135833.png)

其中`vxgplayer-1.8.2.min.js` 和``vxgplayer-1.8.2.min.css`就是我们所需的插件

### 四、创建项目测试

> rtsp_demo-main目录为测试源码，vue版本为3.0

![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/132938_4afd5162_5380040.png "1632719961219.png")

以次执行(yarn如果没有安装，执行 `npm install -g yarn`  安装yarn环境)

```js
//安装依赖
yarn install
//运行项目
yarn serve
```

`vue3.0` 插件需要放在`public`目录下

![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/132951_c90c47a8_5380040.png "1632720247819.png")

`vue2.0` 插件需要放在`static`目录下

![输入图片说明](https://images.gitee.com/uploads/images/2021/0927/133002_fb9cf429_5380040.png "1632720276455.png")