How to make use of it:

1. Add the required JavaScript and CSS files to the web page.

<link rel="stylesheet" href="styles.css" />
<script src="js/svg.js"></script>
<script src="js/fn.js"></script>
<script src="js/main.js"></script>

2. Build the HTML for the media participant. Don’t neglect to exchange the brand and watermark pictures along with your owns.

<div class="main-frame">
  <div class="header">
    <section class="flex">
      <img src="assets/aimikel.png" alt="aimikel logo" class="logo" />
      <h1>Aim Player</h1>
    </section>
    <h5 class="title">This title is very long and it should span multiple lines if it is long enough men. lets add some text to make it even more longer</h5>
    <button type="button" class="btn" id="btn-open">Select</button>
    <input class="hide" type="file" id="files" name="files" multiple />
  </div>
  <div class="player-frame">
    <img src="assets/aimikel.png" class="image" id="watermark" alt="aimikel logo" />
    <video id="video" class="video hide">
      <source src="" type="" />
    </video>
    <div class="playlist hide"></div>
  </div>
  <div class="footer">
    <div class="progress-frame">
      <span class="elapsed-time">00:00:00</span>
      <section class="default-bar">
        <section class="progress-bar"></section>
        <span class="hover-time hide">00:00:00</span>
      </section>
      <span class="total-time">00:00:00</span>
    </div>
    <div class="controls-frame">
      <div class="btns">
        <button type="button" id="btn-backward" class="btn" title="Backward"></button>
        <button type="button" id="btn-play" class="btn" title="play/pause"></button>
        <button type="button" id="btn-forward" class="btn" title="Forward"></button>
        <button type="button" id="btn-previous" class="btn" title="Previous"></button>
        <button type="button" id="btn-repeat" class="btn active" title="Repeat"></button>
        <button type="button" id="btn-next" class="btn" title="Next"></button>
        <button type="button" id="btn-maximize" class="btn" title="Maximize"></button>
        <button type="button" id="btn-playlist" class="btn" title="Playlist"></button>
        <span class="list-count">0/0</span>
      </div>
      <section class="volume-frame">
        <span class="volume-val">50%</span>
        <button type="button" id="btn-volume" class="btn"></button>
        <input type="range" name="volume" id="volume" min="0" max="100" value="50" />
      </section>
    </div>
  </div>
</div>

Web Based Media Player, Aim-Player Plugin/Github

See Demo And Download