Documentation

Getting Started

Install Sopplayer from a CDN or npm and create your first accessible HTML5 video player.

CDN setup

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/sh20raj-backup/Sopplayer@v2.0.0/dist/sopplayer.min.css">
<script src="https://cdn.jsdelivr.net/gh/sh20raj-backup/Sopplayer@v2.0.0/dist/sopplayer.min.js"></script>

Video markup

<video id="player" poster="poster.jpg" preload="metadata" playsinline>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" label="English" srclang="en"
         src="subtitles-en.vtt" default>
</video>

Initialize the player

const player = new Sopplayer('#player', {
  theme: 'duolingo',
  aspectRatio: '16:9',
  keyboard: true
});

Package manager

npm install sopplayer

Import Sopplayer and sopplayer/css in a modern bundler.