vue-video-xg

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

Installation

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>