svelte-video-player
v1.2.5
Published
Basic video player component for svelte apps.
Downloads
1,925
Readme
Svelte Video Player
Basic video player component for svelte, sapper and legacy apps.
Controls 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.
Demo
https://svelte-video-player.netlify.app/
Installation
yarn add svelte-video-player
# OR
npm install svelte-video-playerProps
| 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 |
Usage
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.
Import directly to svelte or sapper apps
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 />For legacy apps load prebuilt script and stylesheet from unpkg.com
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>