Skip to content

Commit 192799b

Browse files
author
wangxd
committed
first commit
1 parent 477ec7d commit 192799b

24 files changed

+1030
-3080
lines changed

‎README.md

+12-246
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-14 09:25:41
5+
* @LastEditTime: 2021-09-14 10:59:48
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)
@@ -90,263 +90,29 @@ export default {
9090

9191
## 基本示例
9292
提供了丰富了配置功能
93-
:::demo 自定义配置 比如自定义poster。
94-
95-
```vue
96-
<template>
97-
<div>
98-
<vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
99-
</div>
100-
</template>
101-
102-
<script setup lang="ts">
103-
import { reactive } from 'vue';
104-
const options = reactive({
105-
width: '800px', //播放器高度
106-
height: '450px', //播放器高度
107-
color: "#409eff", //主题色
108-
title: '', //视频名称
109-
src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源
110-
muted: false, //静音
111-
webFullScreen: false,
112-
speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
113-
autoPlay: false, //自动播放
114-
loop: false, //循环播放
115-
mirror: false, //镜像画面
116-
ligthOff: false, //关灯模式
117-
volume: 0.3, //默认音量大小
118-
control: true, //是否显示控制
119-
controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
120-
})
121-
</script>
122-
123-
<style scoped>
124-
</style>
125-
```
126-
127-
:::
128-
129-
可以通过`props`的`speed`开启或关闭进度条功能, 并且通过 `currentTime`属性控制从60秒开始播放
130-
131-
:::demo 通过`speed`关闭进度条拖动功能。 并且通过 `currentTime`属性控制从60秒开始播放
132-
133-
```vue
134-
<template>
135-
<div>
136-
<vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
137-
</div>
138-
</template>
139-
140-
<script setup lang="ts">
141-
import { reactive } from 'vue';
142-
143-
const options = reactive({
144-
width: '500px', //播放器高度
145-
height: '260px', //播放器高度
146-
color: "#409eff", //主题色
147-
currentTime:60,
148-
speed:false, //关闭进度条拖动
149-
title: '', //视频名称
150-
src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源
151-
})
152-
</script>
153-
154-
<style scoped>
155-
</style>
156-
```
157-
158-
:::
159-
160-
161-
162-
还可以通过`props`的`control`属性 来控制是否显示控制器
163-
:::demo 通过`control` 来控制是否显示控制器
164-
```vue
165-
<template>
166-
<div>
167-
<vue3VideoPlay v-bind="options" poster='https://go.dreamwq.com/videos/ironMan.jpg'/>
168-
</div>
169-
</template>
170-
171-
<script setup lang="ts">
172-
import { reactive } from 'vue';
173-
174-
const options = reactive({
175-
width: '500px', //播放器高度
176-
height: '260px', //播放器高度
177-
color: "#409eff", //主题色
178-
control: false, //是否显示控制器
179-
title: '', //视频名称
180-
src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源
181-
})
182-
</script>
183-
184-
<style scoped>
185-
</style>
186-
187-
```
188-
:::
189-
190-
191-
192-
## 事件示例
193-
:::demo `vue3-video-play` 支持原生`video`所有事件。
194-
195-
```vue
196-
<template>
197-
<div>
198-
<vue3VideoPlay
199-
width="800px"
200-
title="钢铁侠"
201-
:src="options.src"
202-
:poster="options.poster"
203-
@play="onPlay"
204-
@pause="onPause"
205-
@timeupdate="onTimeupdate"
206-
@canplay="onCanplay" />
207-
</div>
208-
209-
</template>
210-
211-
212-
<script setup lang="ts">
213-
import { reactive } from 'vue';
214-
215-
const options = reactive({
216-
src: "https://go.dreamwq.com/videos/IronMan.mp4", //视频源
217-
poster: '', //封面
218-
})
219-
const onPlay = (ev) => {
220-
console.log('播放')
221-
}
222-
const onPause = (ev) => {
223-
console.log(ev, '暂停')
224-
}
225-
226-
const onTimeupdate = (ev) => {
227-
console.log(ev, '时间更新')
228-
}
229-
const onCanplay = (ev) => {
230-
console.log(ev, '可以播放')
231-
}
232-
</script>
233-
234-
<style scoped>
235-
</style>
236-
237-
```
238-
239-
:::
240-
241-
242-
243-
## Hls m3u8视频/直播
244-
:::demo `vue3-video-play` 支持m3u8(hls)播放
245-
```vue
246-
<template>
247-
<div>
248-
<vue3VideoPlay
249-
width="800px"
250-
title="冰河世纪"
251-
:src="options.src"
252-
:type="options.type"
253-
:autoPlay="false"
254-
/>
255-
</div>
256-
257-
</template>
258-
<script setup lang="ts">
259-
import { reactive } from 'vue';
260-
const options = reactive({
261-
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
262-
type: 'm3u8', //视频类型
263-
})
264-
</script>
265-
266-
<style scoped>
267-
</style>
268-
269-
```
270-
:::
271-
272-
27393

27494
## Props
27595
vue3-video-play 支持video原生所有Attributes [video原生属性](https://segmentfault.com/a/1190000008053507) 使用方式和props属性使用一致
27696

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 |
97+
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
98+
| ------ | :--------: | :----: | :----: | :----: |
99+
| width | 播放器宽度 | string | - | 800px |
100+
| height | 播放器高度 | string | - | 450px |
300101

301-
### `props`属性 `controlBtns` 按钮说明
302-
| 名称 | 说明 |
303-
| -------------- | :--------------: |
304-
| audioTrack | 音轨切换按钮 |
305-
| quality | 视频质量切换按钮 |
306-
| speedRate | 速率切换按钮 |
307-
| volume | 音量 |
308-
| setting | 设置 |
309-
| pip | 画中画按钮 |
310-
| pageFullScreen | 网页全屏按钮 |
311-
| fullScreen | 全屏按钮 |
312102

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

316-
| 事件名称 | 说明 | 回调 |
317-
| -------------- | ------------------ | ----- |
318-
| mirrorChange | 镜像翻转事件 | val |
319-
| loopChange | 循环播放开关事件 | val |
320-
| lightOffChange | 关灯模式事件 | val |
321-
| loadstart | 客户端开始请求数据 | event |
322-
| progress | 客户端正在请求数据 | event |
323-
| error | 请求数据时遇到错误 | event |
324-
| stalled | 网速失速 | event |
325-
| play | 开始播放时触发 | event |
326-
| pause | 暂停时触发 | event |
327-
| loadedmetadata | 成功获取资源长度 | event |
328-
| loadeddata | 缓冲中 | event |
329-
| waiting | 等待数据，并非错误 | event |
330-
| playing | 开始回放 | event |
331-
| canplay | 暂停状态下可以播放 | event |
332-
| canplaythrough | 可以持续播放 | event |
333-
| timeupdate | 更新播放时间 | event |
334-
| ended | 播放结束 | event |
335-
| ratechange | 播放速率改变 | event |
336-
| durationchange | 资源长度改变 | event |
337-
| volumechange | 音量改变 | event |
106+
| 事件名称 | 说明 | 回调 |
107+
| ------------ | ------------ | ---- |
108+
| mirrorChange | 镜像翻转事件 | val |
109+
338110

339111
## 快捷键说明
340112
支持快捷键操作
341-
| 键名 | 说明 |
342-
| ---------- | ----------------------------- |
343-
| Space | 暂停/播放 |
344-
| 方向右键 → | 单次快进 10s，长按 5 倍速播放 |
345-
| 方向左键 ← | 快退 10s |
346-
| 方向上键 ↑ | 音量+10% |
347-
| 方向下键 ↓ | 音量-10% |
348-
| Esc | 退出全屏/退出网页全屏 |
349-
| F | 全屏/退出全屏 |
113+
| 键名 | 说明 |
114+
| ----- | ---- |
115+
| Space | / |
350116
# Author
351117

352118
[xdlumia](https://dreamwq.com)

0 commit comments

Comments
 (0)