Press "Enter" to skip to content

Simple Web-Based Media Player For Playing Video And Audio | Aim-Player

Aim-Player is a simple web-based media player for playing video and audio. Create with pure HTML, CSS, and Javascript and that supports both audio (.mp3) and video (.mp4 and .mpeg).  No framework or library included.

Supported media types

Video

  • mp4
  • MPEG

Audio

  • mp3

Control Buttons

  • Play/Pause
  • Fast-Backward
  • Fast-Forward
  • Previous
  • Next
  • Repeat
  • Playlist
  • Maximize
  • Open Files
  • Mute/Unmute

Shortcut Keys

  • N ~ Next
  • P ~ Previous
  • M ~ Mute/Unmute
  • Spacebar ~ Play/Pause
  • Left arrow ~ Fast-Backward
  • Right arrow ~ Fast-Forward
  • Up arrow ~ Increase volume
  • Down arrow ~ Decrease volume

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

Official Website(AimMikel): Click Here

This superior jQuery/javascript plugin is developed by AimMikel. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *