Author: | oscarbebop |
---|---|
Views Total: | 2,475 views |
Official Page: | Go to website |
Last Update: | August 31, 2021 |
License: | MIT |
Preview:

Description:
A fullscreen HTML5 video player with custom controls like play, pause, forward, backward, fullscreen toggle, and etc.
How to use it:
1. Embed an HTML5 video player together with video controls and descriptions into the page.
<div class="player"> <div class="player-overlay" data-fullscreen="false"> <div class="container"> <div class="information-container"> <h1 class="title">Video Title</h1> <p class="description"> Video Description </p> </div> <div class="player-container"> <div class="video-progress"> <div class="video-progress-filled"></div> </div> <div class="player-controls"> <div class="player-buttons"> <button aria-label="play" class="button play" title="play" type="button" ></button> <button aria-label="pause" class="button pause" hidden title="pause" type="button" ></button> <button aria-label="backward" class="button backward" title="backward" type="button" ></button> <button aria-label="forward" class="button forward" title="forward" type="button" ></button> <button aria-label="volume" class="button volume" title="volume" type="button" ></button> <button aria-label="silence" class="button silence" hidden title="silence" type="button" ></button> <div class="volume-progress"> <div class="volume-progress-filled"></div> </div> <div class="time-container"> <p class="current-time">0:00</p> <p class="time-separator">/</p> <p class="duration-video">0:00</p> </div> </div> <div class="expand-container"> <button aria-label="expand" class="button expand" title="expand" type="button" ></button> <button aria-label="reduce" class="button reduce" hidden title="reduce" type="button" ></button> </div> </div> </div> </div> </div> <video class="video" poster="/path/to/poster.png" src="/path/to/video.mp4" ></video> </div>
2. Load the necessary stylesheet and JavaScript on the page. That’s it.
<link rel="stylesheet" href="./styles/style.css" /> <script src="./js/index.js"></script>