import{e as s,o as a,G as n}from"./vendor.f7062dc0.js";const t={class:"markdown-body"},p=[n('

video 视频播放器

介绍

原生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>\n
setup() {\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}\n

自动播放

autoplay 属性设置视频自动播放

<nut-video :source="source" :options="options"></nut-video>\n
setup() {\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}\n

初始化静音

muted属性设置视频初始化静音

<nut-video :source="source" :options="options"></nut-video>\n
setup() {\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}\n

视频封面海报设置

poster 属性设置视频海报

<nut-video :source="source" :options="options"></nut-video>\n
setup() {\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}\n

行内播放

playsinline 属性设置移动端视频行内播放,阻止新打开页面播放(兼容 ios,兼容部分安卓机)

<nut-video :source="source" :options="options"></nut-video>\n
setup() {\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>\n
setup() {\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>\n
setup() {\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

API

Props

字段说明类型默认值
source视频地址和类型设置Object-
options控制视频播放属性Objectrequired
options.autoplay是否自动播放Booleanfalse
options.poster海报设置String-
options.loop是否循环播放Booleanfalse
options.controls是否展示操作栏Booleantrue
options.muted是否静音Booleanfalse
options.volume音量控制Number0.5
options.disabled禁用操作(如循环播放的背景图,禁止操作)Booleanfalse
options.playsinline是否设置为行内播放元素(解决安卓兼容问题)Booleanfalse

Events

事件名称说明回调参数
play播放
pause暂停
playend播放完成回调
',38)],l={setup:(n,{expose:l})=>(l({frontmatter:{}}),(n,l)=>(a(),s("div",t,p)))};export{l as default};