Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fikryfahrezy/svelte-player
A Svelte component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion. (Port of React Player)
https://github.com/fikryfahrezy/svelte-player
audio dailymotion dash facebook hls media player soundcloud streamable svelte sveltejs twitch video vimeo wistia youtube
Last synced: 3 months ago
JSON representation
A Svelte component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion. (Port of React Player)
- Host: GitHub
- URL: https://github.com/fikryfahrezy/svelte-player
- Owner: fikryfahrezy
- License: mit
- Archived: true
- Created: 2023-05-28T12:57:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-03T06:55:40.000Z (about 1 year ago)
- Last Synced: 2024-09-13T21:11:10.103Z (3 months ago)
- Topics: audio, dailymotion, dash, facebook, hls, media, player, soundcloud, streamable, svelte, sveltejs, twitch, video, vimeo, wistia, youtube
- Language: TypeScript
- Homepage: https://fikryfahrezy.github.io/svelte-player
- Size: 598 KB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
```bash
pnpm install svelte-player
```
```ts
import SveltePlayer from "svelte-player";
// Render a YouTube video player
```
By default, SveltePlayer supports [many different types](https://github.com/CookPete/react-player#supported-media) 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](https://github.com/CookPete/react-player#usage) not supported.
Demo page: [`https://fikryfahrezy.github.io/svelte-player`](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](#https://github.com/CookPete/react-player#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending. See [the demo source](https://github.com/fikryfahrezy/svelte-player/blob/main/src/routes/%2Bpage.svelte) for a full example.
For platforms without direct use of `npm` modules, a minified version of `SveletePlayer` is not available.
### Polyfills
- Not available
#### Autoplay
See how [react-player](https://github.com/CookPete/react-player) handle it.
### Props
Read the description at [react-player](https://github.com/CookPete/react-player#props).
| Prop | Supported | Note |
| ------------------ | --------- | ------------------------------------------------------------------------------------- |
| `url` | ✅ | - |
| `playing` | ✅ | - |
| `loop` | ✅ | - |
| `controls` | ✅ | - |
| `light` | ✅ | Set `boolean` value through props or custom component through `` |
| `volume` | ✅ | - |
| `muted` | ✅ | - |
| `playbackRate` | ✅ | - |
| `width` | ✅ | - |
| `height` | ✅ | - |
| `style` | ❌ | - |
| `progressInterval` | ✅ | - |
| `playsinline` | ✅ | - |
| `pip` | ✅ | - |
| `stopOnUnmount` | ✅ | - |
| `fallback` | ❌ | - |
| `wrapper` | ❌ | - |
| `playIcon` | ✅ | Pass it through `` |
| `previewTabIndex` | ✅ | - |
| `config` | ✅ | - |
#### Callback props
Read the description at [react-player](https://github.com/CookPete/react-player#callback-props).
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 |
#### Config prop
There is a single `config` prop to override settings for each type of player:
```ts
```
See [the settings here](https://github.com/cookpete/react-player#config-prop) for each player live under different keys.
### Methods
#### Static Methods
Read the description at [react-player](https://github.com/cookpete/react-player#static-methods).
```ts
import { canPlay, canEnablePiP, addCustomPlayer, removeCustomPlayers } from 'svelte-player';
```
| Method | Supported |
| ------------------------------- | --------- |
| `canPlay(url)` | ✅ |
| `canEnablePiP(url)` | ✅ |
| `addCustomPlayer(CustomPlayer)` | ✅ |
| `removeCustomPlayers()` | ✅ |
#### Instance Methods
Use [`bind:this`](https://svelte.dev/docs/element-directives#bind-this) to call instance methods on the player. See [the demo app](https://github.com/fikryfahrezy/svelte-player/blob/main/src/routes/%2Bpage.svelte) for an example of this.
| Method | Supported |
| ---------------------- | --------- |
| `seekTo(amount, type)` | ✅ |
| `getCurrentTime()` | ✅ |
| `getSecondsLoaded()` | ✅ |
| `getDuration()` | ✅ |
| `getInternalPlayer()` | ✅ |
| `showPreview()` | ✅ |
### Advanced Usage
#### Light player
The `light` prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. [Noembed](https://noembed.com) is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.
If you want to pass in your own thumbnail to use, set `` rather than `true` through `light` prop:
```ts
```
The styles for the preview image and play icon can be overridden by targeting the CSS classes `svelte-player__preview`, `svelte-player__shadow` and `svelte-player__play-icon`.
#### Responsive player
Set `width` and `height` to `100%` and wrap the player in a [fixed aspect ratio box](https://css-tricks.com/aspect-ratio-boxes) to get a responsive player:
```ts
import SveltePlayer from "svelte-player";
.player-wrapper {
position: relative;
padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}
.svelte-player {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
```
See [StackBlitz example](https://stackblitz.com/edit/vitejs-vite-tkhmke?file=src%2FApp.svelte)
#### SDK Overrides
Not supported.
#### Standalone player
Not supported.
#### Adding custom players
If you have your own player that is compatible with SveltePlayer’s internal architecture, you can add it using `addCustomPlayer`:
```ts
import { addCustomPlayer } from "svelte-player";
addCustomPlayer({
key: "custom-player",
name: "CustomPlayer",
canPlay(url) {
return /example\.com/.test(url);
},
loadComponent() {
return import('../somewhere');
},
});
```
Use `removeCustomPlayers` to clear all custom players:
```ts
import { removeCustomPlayers } from "svelte-player";
removeCustomPlayers();
```
It is your responsibility to ensure that custom players keep up with any internal changes to SveltePlayer in later versions.
#### Mobile considerations
Read at [react-player](https://github.com/cookpete/react-player#mobile-considerations).
#### Multiple Sources and Tracks
Passing an array of YouTube URLs to the `url` prop will load them as an untitled playlist.
```ts
import SveltePlayer from "svelte-player";
```
When playing file paths, an array of sources can be passed to the `url` prop to render multiple `` tags.
```ts
```
You can also specify a `type` for each source by using objects with `src` and `type` properties.
```ts
```
[``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) elements for subtitles can be added using `config.file`:
```ts
```
### Thanks
- Big thanks to [react-player](https://github.com/CookPete/react-player) and please support to [Cookpete's Patreon](https://patreon.com/cookpete)