Lightweight Customizable Video/Audio Player – Media Player

Category: Javascript , Recommended | October 8, 2018
Views Total:1,727 views
Official Page:Go to website
Last Update:October 8, 2018


Lightweight Customizable Video/Audio Player – Media Player


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" 
       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"}}'>
<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"}}'>

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'



  • v2.0.0

You Might Be Interested In:

Leave a Reply