This is a convenience fork of the original package which had some issues with SSR and sveltekit at the time this publishing.
https://github.com/meigo/svelte-video-player
All other credits go to the original author of the package.
pnpm install -D svelte-video-player-kit
# OR
npm install svelte-video-player-kitControls are tabbable and respond to key presses (enter/space/arrows) where applicable.
Starting a player will pause previously playing video player instance.
Fullscreen functionality is disabled on iPhone, other than that should function fairly smoothly in both desktop and mobile browsers.
https://svelte-video-player.netlify.app/
| Prop name | Type | Default value | Description |
|---|---|---|---|
| width | string | number |
1920 |
Real width of video for calculating aspect ratio for responsive design |
| height | string | number |
1080 |
Real height of video for calculating aspect ratio for responsive design |
| poster | string |
'' |
Absolute or relative URL of poster image |
| source | string | string[] |
'' |
Absolute or relative URL (or array of those) of video source. Supported formats are webm, mp4 and ogg |
| controlsHeight | string |
'55px' |
Height of bottom control bar, rescaling included components |
| trackHeight | string |
'6px' |
Height of playbar and volume slider tracks |
| thumbSize | string |
'15px' |
Size of playbar and volume slider thumb |
| centerIconSize | string |
'60px' |
Size of center icon |
| playerBgColor | string |
'black' |
Color of player background |
| color | string |
'#FF3E00' |
Main color of control components |
| focusColor | string |
'white' |
Color of focus outlines |
| barsBgColor | string |
'white' |
Background color of playbar and volume slider tracks |
| iconColor | string |
'white' |
Color of button icons |
| bufferedColor | string |
'#FF9600' |
Color of buffered chunks |
| borderRadius | string |
'8px' |
Rounded corner radius of the player. |
| skipSeconds | string | number |
5 |
Skipping time in seconds |
| chunkBars | boolean |
false |
Display overlay with buffered and played parts of video |
| loop | boolean |
false |
Play video in loop |
| controlsOnPause | boolean |
true |
Show control bar when video is paused |
| timeDisplay | boolean |
false |
Display current time beside playbar |
If aspect ratio of the video is other than default 16:9 provide width and height props to player for calculating aspect ratio to prevent CLS.
Real size of video player will be determined by it's parent element.
See Example App.svelte.
<script>
import VideoPlayer from 'svelte-video-player';
const poster = 'https://www.server.com/poster.jpg';
const source = [
'https://www.server.com/video.webm',
'https://www.server.com/video.mp4',
'https://www.server.com/video.ogv',
];
</script>
<VideoPlayer {poster} {source} />;<VideoPlayer poster="poster_url" source="video_url" /><VideoPlayer width="500" height="500" poster="./local_poster.jpg" source="./local_video.mp4" loop />Example: https://codepen.io/meigo-kukk/pen/yLVMZBO
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/svelte-video-player@latest/dist/svelte-video-player.css" />
<script src="https://unpkg.com/svelte-video-player@latest/dist/svelte-video-player.js"></script>
<script>
function initPlayer() {
let player = new VideoPlayer({
target: document.getElementById('player'),
props: {
poster:
'https://res.cloudinary.com/animaly/image/upload/c_scale,w_960/v1608783923/ntiiorkrkxba6kmooa4u.gif',
source:
'https://res.cloudinary.com/animaly/video/upload/ac_aac,vc_h264/v1608783907/xixhbu5v9aawqqgiafri.mp4',
controlsHeight: '55px',
centerIconSize: '60px',
color: 'deepskyblue',
},
});
}
</script>
</head>
<body onload="initPlayer()" style="background-color:#333">
<div style="max-width: 600px; margin: 0 auto;">
<div id="player" />
</div>
</body>
</html>