Lightweight Customizable Video/Audio Player – Media Player

Preview:

Description:

Media Player is a lightweight vanilla JavaScript library that lets you create responsive, accessible, customizable HTML5 media player for video and audio files.

Main features:

• Keyboard interactions.
• Custom controls.
• Playlist.
• Subtitle.
• RTL (Right to left) support.

Basic usage:

Install the Media Player and import it into the project.

$ npm install mediaplayer
import MediaPlayer from 'media-player';

Or load the compiled JavaScript & CSS files in the document.

<link href="media-player.css" rel="stylesheet">
<script src="media-player.js"></script>

Embed your own videos or audios into the document and config the media player by passing the options via ‘data-options’ attribute as displayed below:

<video class="media-player" 
       src="sample.mp4" 
       poster="sample.jpg" 
       controls 
       loop 
       data-options='{"prefix":"media","show":{"download":false,"volume":false,"remainingTime":false},"lang":{"currentTime":"current time","minutes":"minutes","mute":"mute","play":"play","remainingTime":"remaining time","seconds":"seconds","volume":"volume"}}'>
</video>
<audio class="media-player" 
       src="sample.mp3" controls 
       data-options='{"prefix":"media","show":{"fullscreen":false},"lang":{"currentTime":"current time","minutes":"minutes","mute":"mute","play":"play","remainingTime":"remaining time","seconds":"seconds","volume":"volume"}}'>
</audio>

That’s it. All possible options to config & customize the media player.

{
  prefix: 'media',
  show: {
    play: true,
    mute: true,
    volume: true,
    currentTime: true,
    remainingTime: true,
    time: true,
    download: true,
    fullscreen: true
  },
  lang: {
    play: 'play',
    pause: 'pause',
    mute: 'mute',
    unmute: 'unmute',
    volume: 'volume',
    currentTime: 'current time',
    remainingTime: 'remaining time',
    enterFullscreen: 'enter fullscreen',
    leaveFullscreen: 'leave fullscreen',
    download: 'download'
  },
  svgs: {
    play: '#symbol-play',
    pause: '#symbol-pause',
    mute: '#symbol-mute',
    unmute: '#symbol-unmute',
    volume: '#symbol-volume',
    currentTime: '#symbol-currentTime',
    remainingTime: '#symbol-remainingTime',
    enterFullscreen: '#symbol-enterFullscreen',
    leaveFullscreen: '#symbol-leaveFullscreen',
    download: '#symbol-download'
  },
  timeDir: 'ltr',
  volumeDir: 'ltr'
}

Changelog:

10/08/2018

• v2.0.0