Create Custom Video/Audio Player Controls - mediaStyler

mediaStyler is a small jQuery plugin which lets you create custom Video and Audio player controls using your own CSS styles.

How to use it:

1. Load the stylised.css for the default styles of the Video and Audio player controls.

<link href="css/stylised.css" rel="stylesheet">

2. Load both jQuery library and the mediaStyler plugin right before the closing body tag.

<script src="jquery.min.js"></script>
<script src="mediastyler.js"></script>

3. Attach the plugin to the Video & Audio tags. That's it.

$(function () {
  $('audio, video').stylise();
});

4. Apply your own CSS styles to the player controls.

.stylised-player { 
  /* your styles here */
}

.stylised-player p { 
  /* your styles here */
}

.stylised-play, .stylised-pause { 
  /* your styles here */
}

.stylised-restart { 
  /* your styles here */
}

.stylised-time-wrapper { 
  /* your styles here */
}

.stylised-time-progress { 
  /* your styles here */
}

.stylised-play:active, .stylised-pause:active, .stylised-restart:active { 
  /* your styles here */
}

.stylised-play-icon { 
  /* your styles here */
}

.stylised-pause-icon { 
  /* your styles here */
}

5. By default, the plugin will automatically reset other players when an audio/video is playing. You can change the mode to allow multiple players to play simultaneously.

$(function () {
  $('audio, video').stylise({
    mode: 'multi'
  });
});

6. Or pause the players.

$(function () {
  $('audio, video').stylise({
    mode: 'single-pause'
  });
});

---

This awesome jQuery plugin is developed by nathanmurados. For more Advanced Usages, please check the demo page or visit the official website.