https://github.com/Amstramgram75/Amstramgram-Media-Player

Simple, elegant, ligthweight although powerfull and versatile HTML5 video player.

Demo page

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

• Written in pure JavaScript, no dependencies required
• Touch-devices support
• Two UI modes : normal / compact
• Preview thumbnails support (but not for evil iOS - see Compatibility)
• SVG buttons included in css, no extra files to download
• Previous, play/pause, next, fullscreen, download buttons
• All buttons titles configurables
• Display of current time and total duration
• Sass so you can include in your build processes
• Around 13.15 Ko gzipped (js + css)

BUT no subtitles, Youtube or Vimeo support.

You can use one of the following methods :

npm -i -d amstramgramvideoplayer

1. Download amstramgramVideoPlayer.min.css from the dist/css folder and amstramgramVideoPlayer.min.js from the dist/iife folder.
2. Include them somewhere in your document :

<link rel="stylesheet" href="css/amstramgramVideoPlayer.min.css">
<script src="js/amstramgramVideoPlayer.min.js"></script>

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

const AmstramgramVideoPlayer = require('amstramgramVideoPlayer');

import AmstramgramVideoPlayer from 'amstramgramVideoPlayer';

@import 'amstramgramVideoPlayer/css/amstramgramVideoPlayer.min.scss';

Initialize the script by running :

new AmstramgramVideoPlayer(document.querySelector('video'))

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

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

When creating an instance, you can pass an object with custom options as the second parameter.

new AmstramgramVideoPlayer(document.querySelector('video'),{
  // Custom options
});

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

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

🔸 The following options can be set either by overriding the default options, when creating the instance or when updating the source :

◾ autoplay  {Boolean}
Default : false
If true, the attribute autoplay is added to the <video> tag.
Please be aware that most of the browsers block this functionality if volume is not muted.

◾ crossorigin  {String} "anonymous" | "use-credentials"
Default : "anonymous"
Value of the attribute crossorigin for the <video> tag.

◾ download  {Object}
Default :
{
  label: "Télécharger",
  disabled: false,
  hidden: false
}
Download button properties.

◾ duration  {Integer}
Default : 120
Video duration in seconds.
Updated on loadedmetadata event.

◾ format  {Number}
Default : 16/9
Video format ratio.
Updated on loadedmetadata event.

◾ fullscreen  {Object}
Default :
{
  label:
    {
      enter: "Plein Écran",
      exit: "Quitter le plein écran",
    },
  disabled: false,
  hidden: false
}
Fullscreen button properties.

◾ loop  {Boolean}
Default : false
Attribute added to the <video> tag.

◾ next  {Object}
Default :
{
  label: "Suivant",
  disabled: true,
  hidden: true
}
Next button properties.

◾ playsinline  {Boolean}
Default : true
When true, the attributes playsinline and webkit-playsinline are added to the <video> tag.

◾ poster  {String}
Default : undefined
Path of the image used as poster.

◾ preload  {String} "auto" | "metadata" | "none" | "preload"
Default : "none"
Value of the attribute preload for the <video> tag.

◾ previous  {Object}
Default :
{
  label: "Précédent",
  disabled: true,
  hidden: true
}
Previous button properties.

◾ skipTime  {Number} or {String}
Default : "1%"
Value in seconds or percent of the total duration for the time skip applied when left or right keyboard arrows are pressed.

◾ thumbnails  {Object}
Default :
{
  src: undefined,
  number: 100,
}
src is a string defining the path of the image used for the preview thumbnails and number gives the number of thumbnails included.
This number makes it possible to deduce the width of a thumbnail from the natural width property of the image. Then, the height is simply deduce from the video ratio.
You can find all the details on how to generate the thumbnails file here

◾ volume  {Number}
Default : 0.8 on desktop, 1 on mobile and tablet.
Volume of the video.

◾ volumeButton  {Object}
Default :
{
  label:
    {
      mute: "Désactiver le son",
      exit: "Activer le son",
    },
  disabled: false,
  hidden: false
}
Volume button properties.

◾ volumeGroup  {Integer}
Default : 0
More details here.

🔸 The following options can be set either by overriding the default options or when creating the instance :

◾ hideControlsDelay  {Integer}
Default : 5000
Delay in ms between any interaction with the UI and the hidding of the controls.

◾ videoVolumeOrientation  {String} "horizontal" | "vertical"
Default : "vertical"
If "horizontal", the volume slider is horizontally displayed. In all other cases, the slider is vertical.

◾ railMinWidthForNormalUI  {Integer}
Default : 600
Minimal width in pixels available for the time slider in the normal UI. If the available space is inferior to this number, the compact UI is displayed.

🔸 The following options can be set by overriding the default options :

◾ appLabel  {String}
Default : "Lecteur vidéo"
Text given to the player aria-label.

◾ pauseLabel  {String}
Default : "Lecture"
Text given to the title and the aria-label of the Pause button.

◾ playLabel  {String}
Default : "Pause"
Text given to the title and the aria-label of the Play button.

◾ volumeHelpLabel  {String}
Default : "Utilisez les flèches Haut/Bas du clavier pour augmenter ou diminuer le volume"
Text given to the volume slider title.

◾ volumeSliderLabel  {String}
Default : "Potentiomètre de volume"
Text given to the volume slider aria-label.

🔸 The following option can be set when creating the instance :

◾ onInit  {function}
Function called when the instance is initialised.

🔸 Some options can be set directly in the video tag :

autoplay, crossorigin, height, loop, muted, src, playsinline, poster, preload, width.

<video src="the video path" autoplay loop muted poster="the poster path"></video>

If specified, the attributes width an height are used to calculate the video ratio. Those options are overrided by the options set when initialising the instance.

source is either a string pointing to the video file source, either an object of the form :
{
  src: {String}, giving the video file path - required,
  and any of the options listed above
}

time {Number}
Set the playback head position to the specified value, expressed in seconds.

vol {Number between 0 and 1}
Set the volume.

{String}
return the video file path.

{Number}
return the current playback head position in seconds.

{Number}
return the video duration in seconds.

{HTMLVideoElement}
return the HTML video element of the player.

{Boolean}
return true if the video is paused, false if it's playing.

{Number}
return the current volume of the video. 0 is muted, 1 is max.

Do what you may expect...

Do what you may expect...

Do what you may expect...

• Pauses the video.
• Stores the current picture in a canvas and displays it as a poster.
• Set the src attribute to "".
• Set the preload attribute to "none".
• Finally restores the src attribute to its original value.

Used internally if the instance is playing and another one starts to play.
Provided just in case...

Do what you may expect...
However... If delayed is set to true, the controls are hidden after a delay equal to the value given by the player option hideControlsDelay.
By default, the function is without effect if the video is paused (controls remains visible). But if you absolutly need to hide them while the video is paused, pass the second argument to true.

Do what you may expect...

Set the previous button properties.
opt is an object of the form :
{
  label: {String}, // passed to the title attribute of the button.
  hidden: {Boolean}, // if true, the button is hidden.
  disabled: {Boolean}, // if true, the button is disabled (opacity to 0.5; click without effect).
}

Set the next button properties.
See previous() method above.

Set the download button properties.
See previous() method above.

Set the fullscreen button properties.
opt is an object of the form :
{
  {label:
    {
      enter: {String}, // passed to the title attribute of the button when fullscreen mode is off.
      exit: {String}, // passed to the title attribute of the button when fullscreen mode is on.
    }
  hidden: {Boolean}, // if true, the button is hidden.
  disabled: {Boolean}, // if true, the button is disabled (opacity to 0.5; click without effect).
}

Set the volume button properties.
opt is an object of the form :
{
  {label:
    {
      mute: {String}, // passed to the title attribute of the button when volume is > 0.
      exit: {String}, // passed to the title attribute of the button when audio is muted.
    }
  hidden: {Boolean}, // if true, the button is hidden.
  disabled: {Boolean}, // if true, the button is disabled (opacity to 0.5; click without effect).
}

Return the playing instance if there is one. Return undefined if no instance is playing,

Return an array ot all the created instances.

You can access to all media events by the media getter of the instance.

const player = new AmstramgramVideoPlayer(document.querySelector('video'));
player.media.addEventListener('play', function(){
    console.log('Media is playing')
  }
);

callback is a function called when a click event occurs on the Previous button

new AmstramgramVideoPlayer(document.querySelector('video'),{
  onInit: function(){
    this.on('previous', function(){
        console.log('Click event on Previous button')
      }
    );
  }
});

callback is a function called when a click event occurs on the Next button

const player = new AmstramgramVideoPlayer(document.querySelector('video'));
player.on('next', function(){
    console.log('Click detected on Next button')
  }
);

All modern browers on desktop, Android and iOS are supported.
However, because of its currents limitations, iOS won't display the thumbnails.
Internet Explorer 11 needs some polyfills (what a surprise !) :

• Object.assign
• Array.from
• Array.prototype.includes
• window.CustomEvent

If you have absolutly no idea about how to polyfill, copy the amstramgramVideoPlayerPolyfill.min.js file (from any dist folders) to your javascript directory and simply add those lines to the HEAD section of your HTML page :

<script>
  if (typeof Object.assign !== 'function' || !Array.from || !Array.prototype.includes || typeof window.CustomEvent !== "function") {
    var d = document,
        s = d.createElement('script');
    s.async = "false";
    s.src = "<path to amstramgramVideoPlayerPolyfill.min.js>";
    d.head.appendChild(s);
  } 
</script>

Thus, the polyfill file will only be downloaded if needed...

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

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:...

I've been mainly inspired by mediaelement.js, a pionneer in the long and difficult attempt to harmonise media players in HTML5.
Alternatively, I've also used plyr.js.
There is plenty of libraries of this kind. Most of them offer Flash fallback and Youtube, Vimeo and others integration. In turn, they are quite heavy...
This one is focused on lightweight.
The long term project is to extend it to audio.
So, stay tune !

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