# vue-video-xg
> A HTML5 video player component for Vue3
## Code
live demo is here: [https://gitee.com/derekgo/tool-collection/tree/master/customVideo/vue3/pluginVersion](https://gitee.com/derekgo/tool-collection/tree/master/customVideo/vue3/pluginVersion )
## Installation
```bash
npm i vue-video-xg --save
```
## Usage
main.ts
```
// script
import { createApp } from 'vue';
import App from './App.vue';
import customVideo from "vue-video-xg"
import "vue-video-xg/lib/style.css";//引入样式
const app = createApp(App);
app.use(customVideo); //全局注册
app.mount('#app');
```
App.vue
```
<template>
<div class="app-container">
<customVideo :config="config" />
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
let config = ref({
src:"", //视频
poster: "", // 初始化占位图片
volume: 20,//声音
themeColor:"#19accc",//主体颜色
activeColor:"red",//选中颜色
width:"500px",//宽度
height:"300px",//高度
})
</script>
```
npm基于vite制作自己的npm包+ts超详细
154 浏览量
2023-07-28
09:00:17
上传
评论
收藏 150KB ZIP 举报
vue-video-xg.zip （49个子文件） 
yarn.lock 58KB
lib style.css 20KB index.umd.js 16KB customVideo src cpns loading src loading.vue.d.ts 1KB index.d.ts 65B svgIcon src svgIcon.vue.d.ts 1KB index.d.ts 67B customVideo.vue.d.ts 6KB hooks useFunc.d.ts 2KB config index.d.ts 207B index.d.ts 77B
style.css.gz 9KB index.d.ts 94B index.es.js 22KB index.es.js.gz 5KB index.umd.js.gz 4KB tsconfig.node.json 223B src style.css 925B main.ts 291B App.vue 619B package.json 1KB vite plugins vue.ts 198B autoImport.ts 552B index.ts 285B package customVideo assets font iconfont.ttf 3KB iconfont.css 817B iconfont.json 1KB iconfont.woff2 2KB iconfont.js 7KB iconfont.woff 2KB css common.less 12KB base.less 7KB src customVideo.vue 15KB cpns loading src loading.vue 3KB index.ts 225B svgIcon src svgIcon.vue 2KB index.ts 227B hooks useFunc.ts 17KB config index.ts 602B index.ts 307B index.ts 948B package-lock.json 180KB types components.d.ts 1KB vite.config.ts 1KB .npmignore 183B
index.html 312B .gitignore 179B tsconfig.json 770B README.md 1KB资源评论
沉默小管
- 粉丝: 1w+
- 资源: 10
