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.
https://svelte-video-player.netlify.app/
yarn add svelte-video-player # OR npm install svelte-video-player| 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>