![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
svelte-player
Advanced tools
Readme
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
pnpm install svelte-player
<script lang="ts">
import SveltePlayer from "svelte-player";
</script>
// Render a YouTube video player
<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.
See how react-player handle it.
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 | ✅ | - |
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 |
There is a single config
prop to override settings for each type of player:
<SveltePlayer
url={url}
config={ {
youtube: {
playerVars: {
showinfo: 1,
},
},
facebook: {
appId: '12345',
},
} }
/>
See the settings here for each player live under different keys.
Read the description at react-player.
import { canPlay, canEnablePiP, addCustomPlayer, removeCustomPlayers } from 'svelte-player';
Method | Supported |
---|---|
canPlay(url) | ✅ |
canEnablePiP(url) | ✅ |
addCustomPlayer(CustomPlayer) | ✅ |
removeCustomPlayers() | ✅ |
Use bind:this
to call instance methods on the player. See the demo app for an example of this.
Method | Supported |
---|---|
seekTo(amount, type) | ✅ |
getCurrentTime() | ✅ |
getSecondsLoaded() | ✅ |
getDuration() | ✅ |
getInternalPlayer() | ✅ |
showPreview() | ✅ |
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 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 <slot name="light" />
rather than true
through light
prop:
<SveltePlayer>
<img slot="ligth" src="https://example.com/thumbnail.png" alt="Thumbnail" />
</SveltePlayer>
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
.
Set width
and height
to 100%
and wrap the player in a fixed aspect ratio box to get a responsive player:
<script lang="ts">
import SveltePlayer from "svelte-player";
</script>
<div class="player-wrapper">
<div class="svelte-player">
<SveltePlayer
url="https://www.youtube.com/watch?v=oUFJJNQGwhk"
playing={true}
width="100%"
height="100%"
/>
</div>
</div>
<style>
.player-wrapper {
position: relative;
padding-top: 56.25%; /* 720 / 1280 = 0.5625 */
}
.svelte-player {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
Not supported.
Not supported.
If you have your own player that is compatible with SveltePlayer’s internal architecture, you can add it using addCustomPlayer
:
<script lang="ts">
import { addCustomPlayer } from "svelte-player";
addCustomPlayer({
key: "custom-player",
name: "CustomPlayer",
canPlay(url) {
return /example\.com/.test(url);
},
loadComponent() {
return import('../somewhere');
},
});
</script>
Use removeCustomPlayers
to clear all custom players:
<script lang="ts">
import { removeCustomPlayers } from "svelte-player";
removeCustomPlayers();
</script>
It is your responsibility to ensure that custom players keep up with any internal changes to SveltePlayer in later versions.
Read at react-player.
Passing an array of YouTube URLs to the url
prop will load them as an untitled playlist.
<script lang="ts">
import SveltePlayer from "svelte-player";
</script>
<SveltePlayer
url={[
"https://www.youtube.com/watch?v=oUFJJNQGwhk",
"https://www.youtube.com/watch?v=jNgP6d9HraI",
]}
/>
When playing file paths, an array of sources can be passed to the url
prop to render multiple <source>
tags.
<SveltePlayer playing={true} url={["foo.webm", "foo.ogg"]} />
You can also specify a type
for each source by using objects with src
and type
properties.
<SveltePlayer
playing={true}
url={[
{ src: "foo.webm", type: "video/webm" },
{ src: "foo.ogg", type: "video/ogg" }
]}
/>
<track>
elements for subtitles can be added using config.file
:
<SveltePlayer
playing={true}
url="foo.webm"
config={ {
file: {
tracks: [
{ kind: "subtitles", src: "subs/subtitles.en.vtt", srclang: "en", default: true },
{ kind: "subtitles", src: "subs/subtitles.ja.vtt", srclang: "ja" },
{ kind: "subtitles", src: "subs/subtitles.de.vtt", srclang: "de" }
]
}
} }
/>
FAQs
SveltePlayer
The npm package svelte-player receives a total of 44 weekly downloads. As such, svelte-player popularity was classified as not popular.
We found that svelte-player demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.