# JSVideoController

**Repository Path**: chinasoft_ohos/jsvideo-controller

## Basic Information

- **Project Name**: JSVideoController
- **Description**: 一款播放器控制页面应用
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-09
- **Last Updated**: 2021-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSVideoController

## 简介

建议用真机执行该项目，模拟器加载网络视频速度较慢；部分功能API 6才能使用。

该项目是一款播放器控制页面应用，底层播放器现采用鸿蒙JS原生video，上层采用自定义的布局，生成部分场景的控制页面，可实现主流视频应用的部分功能，如播放、全屏、选集、倍速等功能。

![image-20210907102258819](https://i.loli.net/2021/09/07/uCwfFnA7SRDctbP.png)

如上图，底层采用原生video播放器，上层为三个不同的页面，根据播放器的视频播放状态，切换上层页面，上层页面可实现一些拓展功能，如选集、切换清晰度等，也可实现常见功能，如播放、暂停、重播、拖动进度条等，对于常见功能，执行操作时会将行为回调给video，执行video相应操作，如在视频播放时点击暂停按钮，通过回调执行video的pause()方法暂停播放。

***详细流程***

![image-20210907102736339](https://i.loli.net/2021/09/07/cf3FAsG685LXEPK.png)

video通过传入的路径加载视频资源，可以是本地视频，也可以是网络视频。

加载中页面loadingController：可显示加载中动画；可显示实时网速。

播放控制页playingController：可对视频进行一系列操作，如播放/暂停、全屏、选集、调节播放速度，除播放/暂停、全屏按钮外，其他所有按钮均在全屏横屏状态下才显示，且均可隐藏，用户可自定义按钮的组合；所有按钮都有默认图标，也可由用户传入图标资源替换；点击选集、调节播放速度可以弹出选择列表，列表数据由用户传入，此项目只是作为页面展示；此外，底部左右两侧还提供了自定义按钮，用户可根据所需实现按钮的功能。

播放完成页replayController：可进行视频重复播放，下侧有推荐列表，可由用户传入视频列表进行展示。



## 页面展示

![加载页面](https://i.loli.net/2021/09/07/rfhnplzZwvFR6E7.png)![image-20210907093458207](https://i.loli.net/2021/09/07/TNSfj7t5kFD3zLr.png)![image-20210907093526836](https://i.loli.net/2021/09/07/GeSAg9lIUYVfFv2.png)

<img src="https://i.loli.net/2021/09/07/lvJXq8YtSwn7AF9.png" alt="image-20210907093714814" style="zoom: 67%;" /><img src="https://i.loli.net/2021/09/07/hqdJBi6exQzADPZ.png" alt="image-20210907093751811" style="zoom: 67%;" />

<img src="https://i.loli.net/2021/09/07/oxKVSauY2wje4lG.png" alt="image-20210907095511100" style="zoom:67%;" /><img src="https://i.loli.net/2021/09/07/Ftkep3ndjyi8T92.png" alt="image-20210907095539899" style="zoom:67%;" />

![image-20210907095730716](https://i.loli.net/2021/09/07/yXLeRT6cAsWGInO.png)<img src="https://i.loli.net/2021/09/07/ZUQlwWBJr5mbMz8.png" alt="image-20210907095659842" style="zoom:67%;" />



## 用法说明

***属性***

playingController

| 属性               | 类型          | 默认值                                                       | 描述                                                         |
| ------------------ | ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| isPageShow         | boolean       | true                                                         | 设置页面是否显示，true：可见，false：隐藏                    |
| playState          | number        | -1                                                           | 视频播放状态，可选值有：<br>const.VIDEO_STATE.PREPARING：准备中；<br>const.VIDEO_STATE.PREPARED：准备完成；<br>const.VIDEO_STATE.START：播放开始；<br>const.VIDEO_STATE.PAUSE：暂停；<br>const.VIDEO_STATE.FINISH：播放完成；<br>const.VIDEO_STATE.ERROR：错误。 |
| imgBackSrc         | string        | '/common/images/image-back.png'                              | 设置左上角返回按钮图片资源                                   |
| title              | string        | 'Title'                                                      | 设置标题                                                     |
| isBatteryShow      | boolean       | true                                                         | 设置右上方电量是否可见，true：可见，false：隐藏              |
| isTimeShow         | boolean       | true                                                         | 设置右上方时间是否可见，true：可见，false：隐藏              |
| imgPlaySrc         | Array<string> | ['/common/images/play.svg', '/common/images/pause.svg']      | 设置播放按钮图片资源，传入一个长度为2的string数组，第一个为播放按钮资源，第二个为暂停按钮资源 |
| fullScreenSrc      | Array<string> | ['/common/images/full-screen.svg', '/common/images/cancel-full-screen.svg'] | 设置全屏按钮图片资源，传入一个长度为2的string数组，第一个为进入全屏按钮资源，第二个为退出全屏按钮资源 |
| isHorizontal       | boolean       | false                                                        | 当前视频是否为横屏，true：横屏，false：竖屏                  |
| isQualityShow      | boolean       | true                                                         | 设置清晰度按钮是否可见，true：可见，false：隐藏              |
| isSetsShow         | boolean       | true                                                         | 设置选集按钮是否可见，true：可见，false：隐藏                |
| currentValue       | number        | 0                                                            | 当前播放时间总数，单位：秒                                   |
| duration           | number        | 0                                                            | 视频时长总数，单位：秒                                       |
| leftButtonList     | Array<Object> | -                                                            | 自定义左侧按钮文字资源                                       |
| rightButtonList    | Array<Object> | -                                                            | 自定义右侧按钮文字资源                                       |
| qualityList        | Array<Object> | -                                                            | 视频清晰度选择列表数据                                       |
| speedList          | Array<Object> | -                                                            | 播放速度选择列表数据                                         |
| choiceEpisodeList  | Array<Object> | -                                                            | 选集列表数据                                                 |
| quality            | string        | '自动'                                                       | 右下方清晰度按钮文字，根据选择后自动切换                     |
| speed              | string        | '倍速'                                                       | 右下方播放速度按钮文字，根据选择后自动切换                   |
| choiceEpisodeTitle | string        | -                                                            | 选集弹出列表标题                                             |

其中，leftButtonList、rightButtonList代码示例：value：按钮文本文字

```js
[{
	"value": "1"
},
{
	"value": "2"
}]
```

qualityList代码示例：text：文本文字；color：字体颜色

```js
[{
	"text": "蓝光1080P",
	"color": "#FFFFFF"
},
{
	"text": "高清720P",
	"color": "#FFFFFF"
}]
```

speedList代码示例：text：文字文本，数字类型为float；color：文字颜色

```js
[{
	"text": "0.75X",
	"color": "#FFFFFF"
},
{
	"text": "1.0X",
	"color": "#80CD6600"
}]
```

choiceEpisodeList代码示例：text：文字文本，建议直接放集数，选择后返回text；color：文字颜色

```js
[{
	"text": 1,
	"color": "#30CFCFCF"
},
{
	"text": 2,
	"color": "#30CFCFCF"
}]
```

replayController

| 属性         | 类型          | 默认值                     | 描述                                              |
| ------------ | ------------- | -------------------------- | ------------------------------------------------- |
| replayImage  | string        | 'common/images/replay.png' | 设置重播按钮图片资源                              |
| isHorizontal | boolean       | false                      | 是否横屏，true：横屏，false：竖屏                 |
| listData     | Array<Object> | -                          | 推荐列表数据                                      |
| isShow       | boolean       | true                       | 设置下方推荐列表是否显示，true：显示，false：隐藏 |

其中，listData使用示例：title：标题；image：封面图片

```js
[{
	"title": "在小米之家群里推荐华为?",
	"image": "/common/images/video9.jpg"
},
{
	"title": "30分钟手把手教你开发一个鸿蒙版分布式点餐APP",
	"image": "/common/images/video1.jpg"
}]
```



***事件***

playingController

| 事件                | 参数                                    | 描述                        |
| ------------------- | --------------------------------------- | --------------------------- |
| @on-full-screen     | -                                       | 右下角全屏按钮点击事件      |
| @on-seeking         | value：总秒数，单位：秒                 | 进度条拖动时调用            |
| @speed-change       | value：改变后的速度，单位：string       | 改变播放速度时调用          |
| @quality-change     | value：选中的清晰度，单位：string       | 改变视频清晰度时调用        |
| @choice-episode     | tag：选中集数的文本，单位：string       | 改变集数时调用              |
| @play-video         | -                                       | 左下角播放/暂停按钮点击事件 |
| @left-button-click  | index：选中按钮的位置索引，单位：number | 左下自定义按钮点击事件      |
| @right-button-click | index：选中按钮的位置索引，单位：number | 右下自定义按钮点击事件      |
| @return-pre         | -                                       | 左上角返回按钮点击事件      |

replayController

| 事件             | 参数                  | 描述                     |
| ---------------- | --------------------- | ------------------------ |
| @event-type      | -                     | 重播按钮点击事件         |
| @list-item-click | index：点击item的下标 | 点击推荐列表的item时调用 |



## 待完善

1. loadingController中获取实时网速目前用的是随机数，鸿蒙暂无获取实时网速的api。

```js
Math.floor(Math.random() * 400) + "Kb/s";
```

2. 视频全屏还存在问题，本想调用video的全屏，但发现video的direction属性无效，设置为horizontal时，手机竖屏点击全屏按钮，视频依旧为竖屏，咨询了官方，解释是该属性API 6 才能使用，且API 6 的模拟器不一定能生效，所以现在使用的方案为根据手机宽高比来判断手机是否横屏，暂无法直接设置当前页面为横屏，导致目前能实现的效果是，手机方向竖屏，点击全屏按钮后，视频为竖屏全屏显示，当手机横屏时才能显示完整功能。
3. 电池电量以及当前时间是通过计时器获取的，获取频率为电量60/s，时间30/s，目前鸿蒙JS暂无电量、时间改变时回调的API。
4. 视频全屏状态下暂无法沉浸式显示，JS暂无隐藏状态栏方法，用API 6的window设置全屏状态也无效果。
5. 拖动进度条调用的是video的setCurrentTime方法，用该方法拖动进度条有时候会回退几秒，无法拖到想要的位置。