Svelte-video-player-modified NPM

Svelte Video Player

This is a convenience fork of the original package which I did for a purely esthetic reason (reducing the stroke-width of an icon)

https://github.com/meigo/svelte-video-player

All other credits go to the original author of the package.

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>

svelte video player

@infinitebrahmanuniverse/nolb-svelte-v @everything-registry/sub-chunk-2856

1.2.5

2 years ago