Author: | AimMikel |
---|---|
Views Total: | 891 views |
Official Page: | Go to website |
Last Update: | March 1, 2021 |
License: | MIT |
Preview:

Description:
Aim-Player is a custom, web-based media player that supports both Audio (.mp3) and Video (.mp4 & .mpeg).
Control Buttons:
- Play/Pause
- Fast-Backward
- Fast-Forward
- Previous
- Next
- Repeat
- Playlist
- Maximize
- Mute/Unmute
Shortcuts Supported:
- 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 use it:
1. Add the necessary JavaScript and CSS files to the 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 player. Don’t forget to replace the logo and watermark images 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>
3. That’s it. Click the Select button to select a Video or Audio file from local. Done.