# video-plus

**Repository Path**: artcss/video-plus

## Basic Information

- **Project Name**: video-plus
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-05
- **Last Updated**: 2021-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Sense-video

基于[h5-sense-player]封装的 Web Components Js原生流媒体播放器组件。不限框架（vue,react,jquery都可以直接引用）.

## 用法
```html
<sense-video
  class="theme-default"
  name="视频标题"
  poster=""
  ws="ws://{ip}/rtsp-over-ws" 
  rtsp="rtsp://admin:admin1234@{ip}"
  controls="true"
  autoplay="false"
  lang="zh"
  refreshtime="3"
  aspectRatio="16:9"
>
</sense-video>
```
### 说明
## 属性

| 参数        | 说明                          | 参数类型 | 默认值 | 可选值           |
|-------------|:-----------------------------|:-------- |:------|:------           |
| name        | 视频标题                      | String   | ''    |  —               |
| poster      | 视频首图地址                  | String   | ''    |  —               |
| ws          | 视频websocket地址             | String   | ''    |  —               |
| rtsp        | 视频rtsp流地址                | String   | ''    |  —               |
| lang        | 语言设置                      | String   | 'en'  |  en / zh         |
| refreshTime | 自动刷新时间（单位:分钟）       | Number   | 5     |  —               | 
| aspectRatio | 视频长宽比,支持                | String   | '16:9'| 16:9 / 4:3 / 3:2 |
| controls    | 显示工具栏:网页全屏/视频截图    | Boolean  | false |  —               |
| autoplay    | 是否自动播放                   | Boolean  | false |  —               |
| autoReload  | 自动重连（开发中）             | Boolean  | false |                  |

## 自适应布局
丝滑切换

## 特性
- 支持h265解码
- [x] 支持设置视频默认首图
- [x] 支持播放→暂停控制
- [x] 截图和下载
- [x] 网页全屏/退出全屏
- [x] 视频比例16:9,分辨率1920x1080
- [x] autoplay="true"时自动设置为静音

## Completed
- [x] 右键菜单:关于，视频编码信息,问题反馈，重新加载等
- [x] 支持多语言[中/英文]
- [x] 关闭后销毁，worker 清理
- [x] 支持主题设置
- [x] 播放状态：play/paused/playing/loading/switching
- [x] 页面sleep性能优化
- [x] 自适应大小
- [x] 图标均为css代码实现
- [x] 长宽比16:9/3:2/9:16
- [x] 提供:蓝（默认）/绿/紫主题

## todo
- [ ] sense loading
- [ ] 模拟视频断流后重播
- [ ] 兼容旧版[html5_rtsp_player]



用来测试和调试，可以修改视频上方rtsp地址，查看对应视频，4屏同时播放。

page sleep:
>5s  player.stop   →  active:play
>30s cleartimer    →  initNewPlayer

### 相关技术或依赖
- [h5-sense-player]
- [https://developer.mozilla.org/zh-CN/docs/Web/Web_Components](Web_Components)
- [https://lit.dev/](https://lit.dev/)