freaksauce/moovie.js

Movie focused HTML5 Player

moovie.js - Movie focused HTML5 Player

◼️ Features:

• 🔧 Fully Customizable
• 💎 Built-in Caption Offset Adjust on the fly
• 💪 No Dependencies, built with VanillaJS
• 🌎 Tested in All Modern Browsers
• 💻 Responsive
• ⌨️ Standardized Shortcuts
• 🛠 Standardized Events

◼️ Coming soon:

• 🔥 Full support for .str captions
• 🔥 Add tracks dinamically
• 🔥 Caption customization
• 🔥 Improved responsive behavior
• 🔥 Adjust speed on the fly

◼️ Demo:

https://bmsvieira.github.io/moovie.js/

◼️ Installation:

1 - Include JavaScript Source.

<script src="path/to/moovie.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="path/to/moovie.css">

4 - Set HTML.

<video id="example" poster="<<path-to-poster>>">
  <source src="<<path-to-file.mp4>>" type="video/mp4">
  <track kind="captions" label="Portuguese" srclang="pt" src="<<path-to-caption.vtt>>">
  <track kind="captions" label="English" srclang="en" src="<<path-to-caption.vtt>>">
  Your browser does not support the video tag.
</video>

3 - Initilize.

document.addEventListener("DOMContentLoaded", function() {
   var demo1 = new Moovie({
     selector: "#example",
     dimensions: {
          width: "100%"
     }
   });
});

◼️ Captions:

Currently it has full support for WebVTT (.vtt). To add a track use the standard html as the example above shows.

◼️ Caption Offset Adjust:

It is possible to adjust the offset by a total of 10 seconds (-5 / +5) on the fly.

◼️ Shortcuts:

Key	Description
Space Bar	Toggle Play
K	Toggle Play
F	Toggle Fullscreen
->	Forward 5 seconds
<-	Backward 5 seconds
M	Toggle Mute

Methods:

GetPlayerElement: Get generated player element, so it can be added eventListeners.

demo1.GetPlayerElement();

TogglePlay: Play/Pause video

demo1.TogglePlay();

ToogleSubtitles: Enable/Disable subtitles

demo1.ToogleSubtitles();

ToogleFullscreen: Enable/Disable fullscreen

demo1.ToogleFullscreen();