Skip to content

Commit f2b23cd

Browse files
author
wangxd
committed
更新文档
1 parent 6b48a98 commit f2b23cd

File tree

8 files changed

+70
-49
lines changed

8 files changed

+70
-49
lines changed

‎README.md

+41-33
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,9 @@
22
* @Author: web.王晓冬
33
* @Date: 2021-08-19 18:56:59
44
* @LastEditors: web.王晓冬
5-
* @LastEditTime: 2021-09-01 15:23:09
5+
* @LastEditTime: 2021-09-01 18:10:51
66
* @Description: file content
77
-->
8-
98
[![Version](https://img.shields.io/npm/dt/vue3-video-play.svg?style=flat-square)](https://www.npmjs.com/package/vue3-video-play)
109
[![Downloads](https://img.shields.io/npm/v/vue3-video-play.svg?style=flat-square)](https://www.npmjs.com/package/vue3-video-play)
1110
[![GitHub stars](https://img.shields.io/github/stars/xdlumia/vue3-video-play.svg?style=flat-square)](https://github.com/xdlumia/vue3-video-play/stargazers)
@@ -16,15 +15,9 @@
1615

1716
[![NPM](https://nodei.co/npm/vue3-video-play.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue3-video-play)
1817

19-
在使用的时候遇到任何问题 欢迎各位大佬提[issue](https://github.com/xdlumia/vue3-video-play/issues)或者扫码加我微信我拉你入群
20-
21-
![wechat](https://xdlumia.gitee.io/lib/images/wechat.jpeg)
2218

2319
<span style="color:#cb3837"> **必须使用 vue@3.2.2及以上版本**</span>
24-
## vue3-video-play
25-
hls.js player component for Vue3.
2620

27-
适用于 Vue3 的 hls.js 播放器组件。
2821
## 功能一览
2922
1. 支持快捷键操作
3023
2. 支持倍速播放设置
@@ -41,14 +34,14 @@ hls.js player component for Vue3.
4134
[http://vue3-video-play.dreamwq.com/](http://vue3-video-play.dreamwq.com/)
4235

4336

44-
## rc版本 v1.3.0-rc.3 🎉
37+
38+
## 近期更新 v1.3.1-beta.2 🎉
4539
- 新增: 支持hls视频流播放
4640
- 新增: 新增画质切换，需视频流支持
4741
- 新增: 新增画音视切换，需视频流支持
4842
- 新增: props参数增加`currentTime`属性，可跳转到固定时间播放
4943
- 新增: props参数增加`type`属性，视频格式
50-
## 近期更新 v1.2.52 🎉
51-
44+
- 新增: props参数增加`controlBtns`属性，自定义控制器按钮显示
5245
- 新增: 右键菜单功能，右键菜单包涵，视频滤镜调节、快捷键说明、复制当前视频网址
5346
- 新增: `mirrorChange` `loopChange` `lightOffChange` 事件
5447
- 新增: 增加空格快捷键 `播放/暂停` 的操作
@@ -122,7 +115,8 @@ const options = reactive({
122115
mirror: false, //镜像画面
123116
ligthOff: false, //关灯模式
124117
volume: 0.3, //默认音量大小
125-
control: true, //是否显示控制器
118+
control: true, //是否显示控制
119+
controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
126120
})
127121
</script>
128122
@@ -280,27 +274,41 @@ const options = reactive({
280274
## Props
281275
vue3-video-play 支持video原生所有Attributes [video原生属性](https://segmentfault.com/a/1190000008053507) 使用方式和props属性使用一致
282276

283-
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
284-
| ------------- | :-------------------: | :-----: | :----: | :------------------------------------------: |
285-
| width | 播放器宽度 | string | - | 800px |
286-
| height | 播放器高度 | string | - | 450px |
287-
| title | 视频名称 | string | - | - |
288-
| src | 视频资源 | string | - | - |
289-
| type | 视频类型 | string | - | video/mp4 |
290-
| color | 播放器主色调 | string | - | #409eff |
291-
| webFullScreen | 网页全屏 | boolean | - | false |
292-
| speed | 是否支持快进快退 | boolean | - | true |
293-
| currentTime | 跳转到固定播放时间(s) | number | - | 0 |
294-
| speedRate | 倍速配置 | array | - | ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"] |
295-
| mirror | 镜像画面 | boolean | - | false |
296-
| ligthOff | 关灯模式 | boolean | - | false |
297-
| muted | 静音 | boolean | - | false |
298-
| autoPlay | 自动播放 | boolean | - | false,为true时会自动静音 |
299-
| loop | 循环播放 | boolean | - | false |
300-
| volume | 默认音量 | 0.3 | 0-1 | 0.3 |
301-
| poster | 视频封面 | string | - | 视频第一帧 |
302-
303-
277+
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
278+
| ------------- | :-------------------: | :-----: | :------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: |
279+
| width | 播放器宽度 | string | - | 800px |
280+
| height | 播放器高度 | string | - | 450px |
281+
| color | 播放器主色调 | string | - | #409eff |
282+
| src | 视频资源 | string | - | - |
283+
| title | 视频名称 | string | - | - |
284+
| type | 视频类型 | string | - | video/mp4 |
285+
| poster | 视频封面 | string | - | 视频第一帧 |
286+
| webFullScreen | 网页全屏 | boolean | - | false |
287+
| speed | 是否支持快进快退 | boolean | - | true |
288+
| currentTime | 跳转到固定播放时间(s) | number | - | 0 |
289+
| playsinline | ios点击屏幕是否全屏 | boolean | - | false |
290+
| muted | 静音 | boolean | - | false |
291+
| speedRate | 倍速配置 | array | - | ["2.0", "1.0", "1.5", "1.25", "0.75", "0.5"] |
292+
| autoPlay | 自动播放 | boolean | - | false,为true时会自动静音 |
293+
| loop | 循环播放 | boolean | - | false |
294+
| mirror | 镜像画面 | boolean | - | false |
295+
| ligthOff | 关灯模式 | boolean | - | false |
296+
| volume | 默认音量 | number | 0-1 | 0.3 |
297+
| control | 是否显示控制器 | boolean | - | true |
298+
| controlBtns | 控制器显示的按钮 | array | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] | ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] |
299+
| preload | 预加载 | string | meta/auto/none | auto |
300+
301+
### `props`属性 `controlBtns` 按钮说明
302+
| 名称 | 说明 |
303+
| -------------- | :--------------: |
304+
| audioTrack | 音轨切换按钮 |
305+
| quality | 视频质量切换按钮 |
306+
| speedRate | 速率切换按钮 |
307+
| volume | 音量 |
308+
| setting | 设置 |
309+
| pip | 画中画按钮 |
310+
| pageFullScreen | 网页全屏按钮 |
311+
| fullScreen | 全屏按钮 |
304312

305313
## Events
306314
vue3-video-play支持video原生所有事件 [video默认事件](https://segmentfault.com/a/1190000008053507)

‎docs/guide/changelog.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
* @Author: web.王晓冬
33
* @Date: 2021-08-24 14:50:14
44
* @LastEditors: web.王晓冬
5-
* @LastEditTime: 2021-09-01 15:22:13
5+
* @LastEditTime: 2021-09-01 18:11:02
66
* @Description: file content
77
-->
88
<style scoped>
99

1010
</style>
1111
# 更新日志
12+
### 1.3.1-beta.2
13+
*2021-09-1*
14+
- 修复: 工具栏播放/暂停按钮构建后不能点击的问题
15+
- 修复: 缓冲动画构建后动画丢失的问题
1216
### 1.3.1-beta.1
1317
*2021-09-1*
1418
- 新增: props参数增加`controlBtns`属性，自定义控制器按钮显示

‎docs/guide/install.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: web.王晓冬
33
* @Date: 2021-08-19 18:56:59
44
* @LastEditors: web.王晓冬
5-
* @LastEditTime: 2021-09-01 15:23:26
5+
* @LastEditTime: 2021-09-01 18:10:39
66
* @Description: file content
77
-->
88
[![Version](https://img.shields.io/npm/dt/vue3-video-play.svg?style=flat-square)](https://www.npmjs.com/package/vue3-video-play)
@@ -35,7 +35,7 @@
3535

3636

3737

38-
## 近期更新 v1.3.1-beta.1 🎉
38+
## 近期更新 v1.3.1-beta.2 🎉
3939
- 新增: 支持hls视频流播放
4040
- 新增: 新增画质切换，需视频流支持
4141
- 新增: 新增画音视切换，需视频流支持

‎lib/components/d-loading.vue

+13-5
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@
22
* @Author: web.王晓冬
33
* @Date: 2021-08-20 11:00:41
44
* @LastEditors: web.王晓冬
5-
* @LastEditTime: 2021-08-28 10:50:59
5+
* @LastEditTime: 2021-09-01 18:08:30
66
* @Description: file content
77
*/
88
<template>
99
<div class="d-loading" :style="loadingStyle" v-show="LOAD_TYPE.includes(loadType)">
1010
<div>
1111
<!-- 初始化加载 -->
1212
<span v-if="loadType == 'loadstart'">
13-
<d-icon class="rotating" icon="icon-loading" :size="50"></d-icon>
13+
<i class="rotating iconfont icon-loading f50"></i>
1414
<p>{{ text }}</p>
1515
</span>
1616
<!-- 缓冲中 -->
1717
<span v-show="loadType == 'waiting'">
18-
<d-icon class="rotating" icon="icon-loading" :size="50"></d-icon>
18+
<i class="rotating iconfont icon-loading f50"></i>
1919
<p>正在缓冲...</p>
2020
</span>
2121
<!-- 播放结束 -->
2222
<span v-show="loadType == 'ended'">
2323
<p @click="replayHandle" class="d-flex-x d-pointer">
24-
<d-icon icon="icon-replay" :size="24" class="mr5"></d-icon>重新播放
24+
<i class="iconfont icon-replay f24 mr5"></i>重新播放
2525
</p>
2626
</span>
2727
<!-- 播放错误 -->
2828
<span v-show="loadType == 'error' || loadType == 'stalled'">
2929
<p @click="replayHandle" class="d-flex-x d-pointer">
30-
<d-icon icon="icon-replay" :size="24" class="mr5"></d-icon>请求错误
30+
<i class="iconfont icon-replay f24 mr5"></i>请求错误
3131
</p>
3232
</span>
3333
</div>
@@ -59,10 +59,18 @@ const loadingStyle = computed(() => {
5959
</script>
6060

6161
<style scoped lang='less'>
62+
@import "../style/iconfont.css";
6263
@import "../style/reset.less";
6364
@import "../style/base.less";
6465
@import "../style/animate.less";
6566
@import "../style/transition.less";
67+
68+
.f50 {
69+
font-size: 50px;
70+
}
71+
.f24 {
72+
font-size: 24px;
73+
}
6674
.d-loading {
6775
position: absolute;
6876
left: 0;

‎lib/style/base.less

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
.iconfont{display: inline-block;}
12
.d-flex-x,
23
.d-flex-y,
34
.d-flex-center {

‎lib/video-play/main.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@
102102

103103
<div class="d-control-tool" @click="inputFocusHandle">
104104
<div class="d-tool-bar">
105-
<div class="d-tool-item">
106-
<d-icon @click="togglePlay" size="24" :icon="`icon-${state.playBtnState}`"></d-icon>
105+
<div class="d-tool-item" @click="togglePlay">
106+
<d-icon size="24" :icon="`icon-${state.playBtnState}`"></d-icon>
107107
</div>
108108
<div
109109
class="d-tool-item d-tool-time audioTrack-btn"

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-video-play",
3-
"version": "1.3.1-beta.1",
3+
"version": "1.3.1-beta.2",
44
"description": "hls.js player component for Vue3",
55
"files": [
66
"dist",
@@ -49,7 +49,7 @@
4949
"vitepress": "^0.16.1",
5050
"vitepress-theme-demoblock": "^1.1.1",
5151
"vue-tsc": "^0.2.3",
52-
"vue3-video-play": "^1.3.1-beta.1"
52+
"vue3-video-play": "^1.3.1-beta.2"
5353
},
5454
"keywords": [
5555
"vue 3",

‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -2150,10 +2150,10 @@ vue-tsc@^0.2.3:
21502150
dependencies:
21512151
vscode-vue-languageservice "^0.27.0"
21522152

2153-
vue3-video-play@^1.3.1-beta.1:
2154-
version "1.3.1-beta.1"
2155-
resolved "https://registry.yarnpkg.com/vue3-video-play/-/vue3-video-play-1.3.1-beta.1.tgz#b095a3262200b5bdaa32a0aaee1bf89358f7d4fd"
2156-
integrity sha512-kD1bDEe11u4pME6bp3rl/zhjEH1wtGhDyRHk5K93C9L7qkXzzaQFnz90aKfc9Sw3Fw7rGs2Ludaf5gn3v0lN9g==
2153+
vue3-video-play@^1.3.1-beta.2:
2154+
version "1.3.1-beta.2"
2155+
resolved "https://registry.yarnpkg.com/vue3-video-play/-/vue3-video-play-1.3.1-beta.2.tgz#8e5789d34880812c49b581fed27ec83eaacbcfc2"
2156+
integrity sha512-nw1wtp59rNxtbPXe6DvjDhVLZauEM5wqzJL6qLNarCD5Zj2mxVoFLhVVEx48jvCJSC+xIze6TKGNEaQOx/WdPw==
21572157
dependencies:
21582158
hls.js "^1.0.10"
21592159
throttle-debounce "^3.0.1"

0 commit comments

Comments
 (0)