@wurathh/player-svelte

Svelte wrapper for @wurathh/player-core.

Installation

bun add @wurathh/player-svelte @wurathh/player-core

Styles

import "@wurathh/player-svelte/styles.css";

Usage

The Svelte wrapper supports direct component props, so you can use it without building an options object first.

<script lang="ts">
  import { VideoPlayer } from "@wurathh/player-svelte";
  import "@wurathh/player-svelte/styles.css";

  function handlePause() {
    console.log("paused");
  }
</script>

<VideoPlayer
  src="https://example.com/video.mp4"
  poster="https://example.com/poster.jpg"
  onPause={handlePause}
  onReady={() => {
    console.log("ready");
  }}
/>

Player Events

The wrapper forwards core player events as Svelte component events.

<script lang="ts">
  import { VideoPlayer } from "@wurathh/player-svelte";

  function handleInstance(event: CustomEvent) {
    console.log("instance", event.detail);
  }

  function handlePlay(event: CustomEvent) {
    console.log("play event payload", event.detail);
  }
</script>

<VideoPlayer
  src="https://example.com/video.mp4"
  on:instance={handleInstance}
  on:play={handlePlay}
/>

Subtitles And Config

<VideoPlayer
  src="https://example.com/video.mp4"
  subtitles={[
    {
      src: "https://example.com/subtitles/en.vtt",
      srcLang: "en",
      label: "English",
      default: true,
    },
  ]}
  config={{
    i18n: {
      locale: "auto",
      numberingSystem: "auto",
      translations: {},
      customLocales: {},
    },
  }}
/>

Backward Compatibility

The old options prop is still supported.

<script lang="ts">
  import { VideoPlayer } from "@wurathh/player-svelte";

  const options = {
    src: "https://example.com/video.mp4",
    onPause: () => {
      console.log("paused");
    },
  };
</script>

<VideoPlayer {options} />

Notes

• Direct props are the recommended API for new Svelte usage.
• id, className, and style apply to the wrapper container element.
• You can either pass callbacks such as onPause as props or listen to forwarded Svelte events like on:pause.