import{e as s,o as a,G as n}from"./vendor.f7062dc0.js";const t={class:"markdown-body"},p=[n('
原生video实现的视频播放器
import { createApp } from 'vue';\nimport { Video } from '@nutui/nutui';\n\nconst app = createApp();\napp.use(Video);\n<nut-video\n :source="source"\n @play="play"\n @pause="pause"\n @playend="playend">\n</nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n }\n });\n const play = (elm: any) => console.log('play', elm);\n const pause = (elm: any) => console.log('pause', elm);\n const playend = (elm: any) => console.log('playend', elm);\n\n return { play, pause, playend, ...toRefs(state) };\n}\nautoplay 属性设置视频自动播放
<nut-video :source="source" :options="options"></nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n options: {\n autoplay: true,\n muted: true,\n controls: true\n },\n });\n\n return { ...toRefs(state) };\n}\nmuted属性设置视频初始化静音
<nut-video :source="source" :options="options"></nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n options: {\n muted: true,\n controls: true\n },\n });\n\n return { ...toRefs(state) };\n}\nposter 属性设置视频海报
<nut-video :source="source" :options="options"></nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n options: {\n controls: true,\n poster: 'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'\n },\n });\n\n return { ...toRefs(state) };\n}\nplaysinline 属性设置移动端视频行内播放,阻止新打开页面播放(兼容 ios,兼容部分安卓机)
<nut-video :source="source" :options="options"></nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n options: {\n playsinline: true,\n controls: true,\n },\n });\n\n return { ...toRefs(state) };\n}\n当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true,移动端需要设置 playsinline 行内展示
<nut-video :source="source" :options="options"></nut-video>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n options: {\n controls: false,\n autoplay: true,\n muted: true,\n disabled: true,\n playsinline: true,\n loop: true\n },\n });\n\n return { ...toRefs(state) };\n}\n当视频地址发生变化时,重置视频
<nut-video :source="source"></nut-video>\n<nut-button type="primary" @click="changeVideo">切换视频</nut-button>\nsetup() {\n const state = reactive({\n source: {\n src: 'https://storage.jd.com/about/big-final.mp4',\n type: 'video/mp4'\n },\n });\n const changeVideo = () => {\n state.source1 = {\n src: 'https://vjs.zencdn.net/v/oceans.mp4',\n type: 'video/mp4'\n };\n };\n\n return { ...toRefs(state), changeVideo };\n}\n| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| source | 视频地址和类型设置 | Object | - |
| options | 控制视频播放属性 | Object | required |
| options.autoplay | 是否自动播放 | Boolean | false |
| options.poster | 海报设置 | String | - |
| options.loop | 是否循环播放 | Boolean | false |
| options.controls | 是否展示操作栏 | Boolean | true |
| options.muted | 是否静音 | Boolean | false |
| options.volume | 音量控制 | Number | 0.5 |
| options.disabled | 禁用操作(如循环播放的背景图,禁止操作) | Boolean | false |
| options.playsinline | 是否设置为行内播放元素(解决安卓兼容问题) | Boolean | false |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| play | 播放 | – |
| pause | 暂停 | – |
| playend | 播放完成回调 | – |