|
|
@@ -5,21 +5,12 @@
|
|
|
## 基本用法
|
|
|
|
|
|
```html
|
|
|
-<nut-video :sources="sources" :options="options"
|
|
|
- @play="play"
|
|
|
- @pause="pause"
|
|
|
- @playend="playend">
|
|
|
-</nut-video>
|
|
|
+<nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>
|
|
|
```
|
|
|
-> source属性：设置视频地址和格式类型，可设置多种视频文件格式以便支持不同浏览器的解析支持，一般采用：MP4、webm、ogv等格式
|
|
|
|
|
|
-> options属性：设置视频的播放参数，如：autoplay、controls、poster、loop、volume等
|
|
|
+> source 属性：设置视频地址和格式类型，可设置多种视频文件格式以便支持不同浏览器的解析支持，一般采用：MP4、webm、ogv 等格式
|
|
|
|
|
|
-> play事件：监听视频播放
|
|
|
-
|
|
|
-> pause事件：监听视频暂停播放
|
|
|
-
|
|
|
-> playend事件：监听视频播放完成
|
|
|
+> options 属性：设置视频的播放参数，如：autoplay、controls、poster、loop、volume 等
|
|
|
|
|
|
```javascript
|
|
|
export default {
|
|
|
@@ -36,16 +27,25 @@ export default {
|
|
|
options: {
|
|
|
controls: true
|
|
|
},
|
|
|
-
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ play(elm){
|
|
|
+ console.log('play',elm)
|
|
|
+ },
|
|
|
+ pause(e){
|
|
|
+ console.log('pause')
|
|
|
+ },
|
|
|
+ playend(e){
|
|
|
+ alert('播放结束')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
```
|
|
|
|
|
|
## 自动播放
|
|
|
|
|
|
-autoplay属性设置视频自动播放
|
|
|
-
|
|
|
+autoplay 属性设置视频自动播放
|
|
|
|
|
|
```html
|
|
|
<nut-video :sources="sources" :options="options2"></nut-video>
|
|
|
@@ -69,7 +69,7 @@ export default {
|
|
|
|
|
|
## 初始化静音
|
|
|
|
|
|
-muted属性设置视频初始化静音
|
|
|
+muted 属性设置视频初始化静音
|
|
|
|
|
|
```html
|
|
|
<nut-video :sources="sources" :options="options3"></nut-video>
|
|
|
@@ -92,7 +92,7 @@ export default {
|
|
|
|
|
|
## 视频封面海报设置
|
|
|
|
|
|
-poster属性设置视频海报
|
|
|
+poster 属性设置视频海报
|
|
|
|
|
|
```html
|
|
|
<nut-video :sources="sources" :options="options4"></nut-video>
|
|
|
@@ -115,7 +115,7 @@ export default {
|
|
|
|
|
|
## 行内播放
|
|
|
|
|
|
-playsinline属性设置移动端视频行内播放，阻止新打开页面播放（兼容ios，兼容部分安卓机）
|
|
|
+playsinline 属性设置移动端视频行内播放，阻止新打开页面播放（兼容 ios，兼容部分安卓机）
|
|
|
|
|
|
```html
|
|
|
<nut-video :sources="sources" :options="options5"></nut-video>
|
|
|
@@ -164,8 +164,6 @@ export default {
|
|
|
};
|
|
|
```
|
|
|
|
|
|
-
|
|
|
-
|
|
|
## Prop
|
|
|
|
|
|
| 字段 | 说明 | 类型 | 默认值 |
|
|
|
@@ -177,16 +175,14 @@ export default {
|
|
|
| options.loop | 是否循环播放 | Boolean | false |
|
|
|
| options.controls | 是否展示操作栏 | Boolean | true |
|
|
|
| options.muted | 是否静音 | Boolean | false |
|
|
|
-| options.volume | 音量控制 | Number | 0.5 |
|
|
|
-| options.disabled | 禁用操作（如循环播放的背景图，禁止操作） | Boolean | false |
|
|
|
+| options.volume | 音量控制 | Number | 0.5 |
|
|
|
+| options.disabled | 禁用操作（如循环播放的背景图，禁止操作） | Boolean | false |
|
|
|
| options.playsinline | 是否设置为行内播放元素（解决安卓兼容问题） | Boolean | false |
|
|
|
|
|
|
-
|
|
|
### Event
|
|
|
|
|
|
-| 事件名称 | 说明 | 回调参数 |
|
|
|
-| -------- | -------------------- | -------------------------------------- |
|
|
|
-| play | 播放 | -- |
|
|
|
-| pause | 暂停 | -- |
|
|
|
-| playend | 播放完成回调 | -- |
|
|
|
-
|
|
|
+| 事件名称 | 说明 | 回调参数 |
|
|
|
+| -------- | ------------ | -------- |
|
|
|
+| play | 播放 | -- |
|
|
|
+| pause | 暂停 | -- |
|
|
|
+| playend | 播放完成回调 | -- |
|
yewenwen