SveltePlayer
A Svelte component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. This package is port of CookPete/react-player in Svelte
Usage
pnpm install svelte-player
<script lang="ts">
import SveltePlayer from 'svelte-player';
</script>
<SveltePlayer url="https://www.youtube.com/watch?v=LXb3EKWsInQ" />
By default, SveltePlayer supports many different types of url
. Import only one type such as svelte-player/youtube
or svelte-player/lazy
to lazy load the appropriate player for the url
you pass in like react-player not supported.
Demo page: https://fikryfahrezy.github.io/svelte-player
The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. Props can be passed in to control playback and react to events such as buffering or media ending. See the demo source for a full example.
For platforms without direct use of npm
modules, a minified version of SveletePlayer
is not available.
Polyfills
Autoplay
See how react-player handle it.
Props
Read the description at react-player.
Prop | Supported | Note |
---|
url | ✅ | - |
playing | ✅ | - |
loop | ✅ | - |
controls | ✅ | - |
light | ✅ | Set boolean value through props or custom component through <slot name="light" /> |
volume | ✅ | - |
muted | ✅ | - |
playbackRate | ✅ | - |
width | ✅ | - |
height | ✅ | - |
style | ❌ | - |
progressInterval | ✅ | - |
playsinline | ✅ | - |
pip | ✅ | - |
stopOnUnmount | ✅ | - |
fallback | ❌ | - |
wrapper | ❌ | - |
playIcon | ✅ | Pass it through <slot name="play-icon" > |
previewTabIndex | ✅ | - |
config | ✅ | - |
Callback props
Read the description at react-player.
Callback props take a function that gets fired on various player events:
Prop | Supported | Svelte Player Version |
---|
onReady | ✅ | on:ready |
onStart | ✅ | on:start |
onPlay | ✅ | on:play |
onProgress | ✅ | on:progress |
onDuration | ✅ | on:duration |
onPause | ✅ | on:pause |
onBuffer | ✅ | on:buffer |
onBufferEnd | ✅ | on:bufferEnd |
onSeek | ✅ | on:seek |
onPlaybackRateChange | ✅ | on:playbackRateChange |
onPlaybackQualityChange | ✅ | on:playbackQualityChange |
onEnded | ✅ | on:ended |
onError | ✅ | on:error |
onClickPreview | ✅ | on:clickPreview |
onEnablePIP | ✅ | on:enablePIP |
onDisablePIP | ✅ | on:disablePIP |