@loickit-v/player

Components

LPlayer

player component for vue

Props

• src

  <string> | undefined

  the video source

• active

  <boolean>

  default: false

  video active, when it changed, video.paused will changed

• muted

  <boolean>

  video muted

  default: true

  we provide a plugin usePlayer to control global muted

• poster

  <string>

  video poster

• loop

  <boolean>

  default: true

  video loop

Expose

• switchStatus

  switch video.paused

• state readonly

  video state

  • isPaused
  • isLoading
  • duration
  • currentTime

Usage

<script setup lang="ts">
defineOptions({ name: 'App' });
import { ref } from 'vue';
import { LPlayer } from '@loickit-v/player';

const muted = ref(true);
</script>

<template>
  <LPlayer active :muted="muted" src="" />
</template>

<style></style>

CSS Variable

/* 进度条高度 */
--loickit-player-progress-height: 10px;
/* 进度条圆角 */
--loickit-player-progress-radius: 5px;
/* 进度条按钮大小 */
--loickit-player-progress-btn-size: 20px;
/* 进度条背景色 */
--loickit-player-progress-bar-color: rgba(255, 255, 255, 0.5);
/* 进度条颜色 (进度条的值) */
--loickit-player-progress-color: #fff;
/* 进度条拖拽区域大小 */
--loickit-player-progress-drag-area: 25px;
/* 进度条bottom */
--loickit-player-progress-bottom: 80px;
/* 时间字体大小 */
--loickit-player-time-size: 16px;
/* 时间字体颜色 */
--loickit-player-time-color: #ccc;
/* 居中的图标(loading, pause)大小 */
--loickit-player-icon-size: auto;

Hooks

usePlayer

if u have more video player and want to unifield control their muted or some other status(wait...), use it

Usage

// entry
import lplayer from '@loickit-v/player';

const app = createApp(App);
app.use(lplayer).mount('#app');

<script>
import { usePlayer } from '@loickit-v/player';

const p = usePlayer();
</script>
<template>
  <button @click="p.toggleMuted">control all video</button>
</template>

<script>
import { usePlayer, LPlayer } from '@loickit-v/player';
const list = reacitve([]);
const p = usePlayer();
</script>
<template>
  <LPlayer v-for="i in list" :key="i.id" active :muted="p.muted" />
</template>