# play-video

**Repository Path**: saseraw/play-video

## Basic Information

- **Project Name**: play-video
- **Description**: hls player
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-18
- **Last Updated**: 2022-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

基于开源项目封装成一个独立的vue组件，提供如下功能：
设置主窗口大小
设置副窗口大小（固定在主窗口右上角）
设置视频的名称
设置主视频播放地址
设置副视频播放地址
点击副窗口，切换当前的主副视频播放窗口（播放不能中断）
播放控制栏同时控制两个视频的播放、暂停、倍数以及拖动定位播放
播放时长以及总时长显示（默认两路视频时长一致）

播放器的内容使用开源的项目：
https://github.com/goldvideo/h265player

功能api说明：
https://goldvideo.github.io/h265player/API/index.html


## 项目获取启动
```
npm install
npm run serve

访问localhost:8080/video 查看效果
```

## 组件使用方式
1.将视频的依赖包 public/static/player 文件夹复制到项目的public/static 文件夹下
2.index.html 中引入
```
    <link rel="stylesheet" href="./static/player/goldplay-h265.css">
    <script src="./static/player/goldplay-h265-sdk.js"></script>
```
3.将src/components/HLSPlayer1.vue 和src/components/Video.js 放到自己项目的组件中，这两个文件在同一级目录
4.调用组件的方式参考 src/views/Home1.vue 
5.参数说明
```javascript
videoConfig: {
                mainVideo: {
                    width: 820, // 主视频宽度 Number  -- 必填
                    height: 620, // 主视频高度 Number -- 必填
                    sourceURL:'xxx.m3u8' // 主视频地址 String --必填
                    name: '我是主视频', // 主视频名称 --非必填
                    perspectiveName: '正面', //主视频视角  -- 非必填
                },
                subVideo: {
                    width: 310,// 副视频宽度 Number  -- 必填
                    height: 200,// 副视频高度 Number -- 必填
                    sourceURL: 'xxx.m3u8' // 副视频地址 String --必填
                    name: '我是副视频', // 主视频名称 String --非必填
                    perspectiveName: '侧面', //副视频视角 String -- 非必填
                },
                common: {  // 主副视频公共配置 参考goldVidoe 的api
                    playBackRate: 1,
                    // preload: true,
                    // autoPlay: false,
                    controlBarAutoHide: true,
                    type: 'HLS',
                },
            },

```