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-player

Props

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>

meigo / svelte-video-player

readme