Skip to content

Latest commit

 

History

History
71 lines (52 loc) · 1.45 KB

README.md

File metadata and controls

71 lines (52 loc) · 1.45 KB
Raw

MMP4W

Minimalist media player for web. Control volume, current time, play-pause easily from keyboard. Supports both videos and images.

CDN

https://cdn.jsdelivr.net/gh/sujaudd1n/mmp4w/src/mmp4w.min.js

Setup

  • Create a container element and set id as mmp4w_container.
<div id="mmp4w_container">
</div>
  • Set width and height for the container element. Video element takes full width and height of its parent.
/* example */
#mmp4w_container {
    width: 900px;
    height: 450px;
}
  • Add a script tag with defer attribute and type="module" in head tag of html document.
<script src="./script.js" type="module" defer></script>

Inside script.js import the mmp4w object.

import { mmp4w } from "./src/mmp4w.js";
// or from cdn
//import { mmp4w } from "https://cdn.jsdelivr.net/gh/sujaudd1n/mmp4w/src/mmp4w.min.js";

// Create an array of object. Each object represents a video element.

const videos = [
    { url: "<videourl>" },
    { url: "<videourl>" },
    { url: "<videourl>" },
    { url: "<videourl>" },
];

mmp4w.set_playlist(videos);

The setup is complete.

Keybindings

  • p - Play/pause the video.
  • s - Stop the video.
  • m - Mute.
  • k - Volume up.
  • j - Volume down.
  • r - Enable loop.
  • h - Previous.
  • l - Next.
  • ctrl-h - Seek behind.
  • ctrl-l - Seek front.
  • f - Fullscreen.
  • o - Chage video fit.
  • c - Show/hide video controls.