Add video streaming service with reduced loading

consumption and token authentication
This commit is contained in:
2023-11-16 02:44:44 +08:00
parent 8a83cdd61a
commit aa05cd952f

View File

@@ -2,6 +2,43 @@
- [x] 提供webp生成服务
- [x] 提供流媒体服务
- [x] 点击播放之前不加载视频(减少流量消耗)
- [x] 使用封面图片替代加载视屏第一帧
通过流媒体服务降低视频文件加载消耗及防止恶意刷流量
对视频地址添加有效期, 过期需由服务器重新提供token认证观众身份
可后期增加基于用户账户或cookie信任度评估的视频播放权限认证
```javascript
// 请求视频播放地址
import Hls from 'hls.js'
import axios from 'axios'
axios.get('/video?url=' + encodeURIComponent(this.src)).then(res => {
const img = res.data.VideoBase.CoverURL
if (img) {
video.poster = img
}
const m3u8 = res.data.PlayInfoList.PlayInfo.find(x => x.Format === 'm3u8')
if (!m3u8) {
video.src = this.src
return console.log('流媒体地址不含m3u8')
}
this.player = new Hls({ maxMaxBufferLength: 5, autoStartLoad: false })
this.player.loadSource(m3u8.PlayURL)
this.player.attachMedia(video)
this.player.on(Hls.Events.MANIFEST_PARSED, () => {
if (this.autoplay) {
video.play()
}
})
}).catch(err => {
console.log('未取得流媒体地址')
video.src = this.src
})
```
```javascript
// GET /webp/{type}-{id}-{version}-{width}-{height}-{fit}.{format}
@@ -145,37 +182,37 @@ GET /api/images
列表视图:(输出控制)
-------------------------------------------------------------------------------------
Method | URL | Info | Status
-------|--------------------------------|-----------------------------------|--------
GET | /api/images | 标准顺序查询 | ok
GET | /api/images?page=1&pageSize=20 | 指定页码和指定分页大小 | ok
| Method | URL | Info | Status |
| ------ | ------------------------------ | ---------------------- | ------ |
| GET | /api/images | 标准顺序查询 | ok |
| GET | /api/images?page=1&pageSize=20 | 指定页码和指定分页大小 | ok |
筛选规则:(数据过滤)
-------------------------------------------------------------------------------------
Method | URL | Info | Statu
-------|--------------------------------|-----------------------------------|--------
GET | /api/images?user=1234 | 筛选指定某用户发表的图片 |
GET | /api/images?choice=1234 | 筛选指定精选集下的图片 |
GET | /api/images?like=1234 | 筛选指定用户点赞的图片 |
GET | /api/images?tag=1234 | 筛选含有指定标签的图片 |
GET | /api/images?tag=1234,1235 | 筛选含有多个标签之一的图片(并集) |
GET | /api/images?tag=1234&tag=1235 | 筛选含有指定多个标签的图片(交集) |
GET | /api/images?user=1234&tag=123 | 筛选指定用户的指定标签图片(交集) |
GET | /api/images?date=20220214+ | 时间范围(之后) |
GET | /api/images?date=20220214- | 时间范围(之前) |
GET | /api/images?date=2022~2023 | 时间范围(之间) |
| Method | URL | Info | Statu |
| ------ | ----------------------------- | -------------------------------- | ----- |
| GET | /api/images?user=1234 | 筛选指定某用户发表的图片 |
| GET | /api/images?choice=1234 | 筛选指定精选集下的图片 |
| GET | /api/images?like=1234 | 筛选指定用户点赞的图片 |
| GET | /api/images?tag=1234 | 筛选含有指定标签的图片 |
| GET | /api/images?tag=1234,1235 | 筛选含有多个标签之一的图片(并集) |
| GET | /api/images?tag=1234&tag=1235 | 筛选含有指定多个标签的图片(交集) |
| GET | /api/images?user=1234&tag=123 | 筛选指定用户的指定标签图片(交集) |
| GET | /api/images?date=20220214+ | 时间范围(之后) |
| GET | /api/images?date=20220214- | 时间范围(之前) |
| GET | /api/images?date=2022~2023 | 时间范围(之间) |
排序规则:(权重强化)
-------------------------------------------------------------------------------------
Method | URL | Info | Status
-------|--------------------------------|-----------------------------------|--------
GET | /api/images?similar=1234 | 根据指定图片的相似图片(指定图片ID) | ok
GET | /api/images?sort=date+ | 排序规则(相似图片查询时此项无效) |
GET | /api/images?sort=like | 根据用户偏好推荐(指定用户的偏好) |
GET | /api/images?sort=history | 根据浏览记录推荐(指定用户的记录) |
GET | /api/images?sort=choice | 根据精选集推荐(指定精选集ID,取一组权重) |
| Method | URL | Info | Status |
| ------ | ------------------------ | --------------------------------------- | ------ |
| GET | /api/images?similar=1234 | 根据指定图片的相似图片(指定图片ID) | ok |
| GET | /api/images?sort=date+ | 排序规则(相似图片查询时此项无效) |
| GET | /api/images?sort=like | 根据用户偏好推荐(指定用户的偏好) |
| GET | /api/images?sort=history | 根据浏览记录推荐(指定用户的记录) |
| GET | /api/images?sort=choice | 根据精选集推荐(指定精选集ID,取一组权重) |
* 注意, 筛选规则为多条件取交集, 单条件的复数取并集
* 权重强化属于排序规则而非过滤规则