@sweet-player/vue

@sweet-player/vue

Vue component wrapper for @sweet-player/core.

Live Demo: player.sweetui.com

Install

npm install @sweet-player/vue

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { SweetPlayer } from '@sweet-player/vue';
import type { SweetPlayerCore } from '@sweet-player/vue';

const player = ref<SweetPlayerCore | null>(null);

function onReady(p: SweetPlayerCore) {
  player.value = p;
}
</script>

<template>
  <SweetPlayer
    src="https://example.com/video.m3u8"
    title="Video Title"
    id="ep-01"
    :volume="80"
    :seek-step="10"
    :auto-next="5"
    @ready="onReady"
    @next="() => console.log('next')"
  />
</template>

Props

All @sweet-player/core options (except container) can be passed as props:

Events

Instance Methods

Access the player instance via @ready event, then call any method:

player.value?.play();
player.value?.seek(60);
player.value?.setVolume(50);
player.value?.toggleFullscreen();
player.value?.togglePip();

License

MIT