Simple, elegant, lightweight although powerful and versatile HTML5 media player.

Docs and demo

Table of contents

• Features
• Installation
• Importing
• Usage
• Compatibility
• Thanks
• Donation
• Credits
• License

Features

• Written in pure JavaScript, no dependencies required
• Touch-devices support
• Three UI modes : normal / compact / mini
• Preview thumbnails support
• SVG buttons included in css, no extra files to download
• Previous, play/pause, next, fullscreen, subtitles, pip, settings, download buttons
• All buttons titles configurable
• Display of current time and total duration
• Sass so you can include in your build processes
• Around 25.44 Ko gzipped (js + css) and even 19.39 Ko if you only need audio players...

BUT no Youtube, Vimeo or whatever integration.

Installation

You can use one of the following methods :

npm

npm -i -d amstramgrammediaplayer

Manually

1. Download the dist folder.
2. Somewhere in your document :

<link rel="stylesheet" href="dist/css/amstramgramMediaPlayer.min.css">
<script src="dist/iife/amstramgramMediaPlayer.min.js"></script>

Or if you like to take advantage of the support for javascript modules in all major browsers (and you should !), you can do :

<link rel="stylesheet" href="dist/css/amstramgramMediaPlayer.min.css">
<script type="module">
   import AmstramgramMediaPlayer from './dist/esm/amstramgramMediaPlayer.min.js'
   window.AmstramgramMediaPlayer = AmstramgramMediaPlayer
</script>
<script nomodule src="dist/iife/amstramgramMediaPlayer.min.js"></script>

Importing

Traditional approach

If you include the file with a <script> tag, you don't have to import anything explicitly. AmstramgramMediaPlayer will be available in the global scope.

CommonJS

const AmstramgramMediaPlayer = require('AmstramgramMediaPlayer');

ES2015 modules

import AmstramgramMediaPlayer from 'AmstramgramMediaPlayer';

Sass

@use "../node_modules/amstramgrammediaplayer/src/scss/amstramgramAudioPlayer";

More infos here.

Usage

<video id="myVideo" src="path_to_video.mp4">

Initialize the script by running :

new AmstramgramMediaPlayer(document.querySelector('#myVideo'))

Check the examples here and here.

Customization

Before you create an instance, you can override the class default options :

AmstramgramMediaPlayer.options({
  // Custom options
});

When creating an instance, you can pass an object with source(s) and custom options as the second parameter.

new AmstramgramMediaPlayer(document.querySelector('video'),
  {
    src: 'video file path',
    duration: 'duration of the video',
    poster: 'poster path',
    thumbnails: 'thumbnails path',
    ...
  }
);

When setting the source, you can pass a simple string giving the video file path or an object including the source(s) path and several other options as duration, poster, thumbnails and so on...

const player = new AmstramgramMediaPlayer(document.querySelector('video'));
player.src = {
  src: 'video file path',
  duration: 'duration of the video',
  poster: 'poster path',
  thumbnails: 'thumbnails path',
  ...
}

See here for details...

Compatibility

All modern browsers on desktop, Android and iOS are supported.
Internet Explorer 11 needs some polyfills (what a surprise !). Have a look here for all the details...

Thanks

Thanks to BrowserStack for providing the infrastructure that allows me to test in real browsers !

Donation

If you find this project useful and want to say thanks, you can buy me a cup of coffee, a beer, a computer, a sofa, a haunted manor or whatever you want...
...:blush:...

Credits

I've been mainly inspired by mediaelement.js, a pioneer in the long and difficult attempt to harmonize media players in HTML5.
Alternatively, I've also used plyr.js.

License

Copyright (c) 2019 Amstramgram
This content is released under the MIT License.