Custom HTML5 Video Player Optimized For Movies – moovie.js

A responsive, fully customizable, nice-looking, movie-focused HTML5 video player with support for both WebVTT(.vtt) and SubRip(.srt) captions.

More Features:

• Supports keyboard shortcuts.
• Useful API methods.
• Custom caption offset.
• Allows you to add tracks/captions dynamically.
• Written in Vanilla JavaScript. No dependency required.

How to use it:

1. Import the stylesheet moovie.css and JavaScript moovie.js.

<link rel=”stylesheet” href=”css/moovie.css” />
<script src=”js/moovie.js”></script>

2. Embed your video into the document and specify the path to captions as follows:

<video id="example" poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" label="French" srclang="fr" src="caption-fr.vtt>>">
  <track kind="captions" label="English" srclang="en" src="caption-en.vtt>>">
  Your browser does not support the video tag.
</video>

3. Initialize the Moovie on the video and done.

document.addEventListener("DOMContentLoaded", function() {
  var myPlayer = new Moovie({
      selector: "#example"
   });
});

4. Determine the dimensions of the video. Default: 700px.

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

5. Add captions to your video player.

myPlayer.addTrack({
  options : {
    0: {
      label: 'Italian',
      srclang: "it",
      src: "1.srt"
    },
    1: {
      label: 'Spanish',
      srclang: "es",
      src: "2.vvt"
    }
  }
}

6. More API methods.

// Toggle play
myPlayer.togglePlay();
// Enable/disable subtitles
myPlayer.toggleSubtitles();
// Enable/disable fullscreen mode
myPlayer.toggleFullscreen();
// Returns player DOM element
myPlayer.playerElement
// Returns a boolean indicating if the current player is playing.
myPlayer.playing
// Returns a boolean indicating if the current player is paused.
myPlayer.paused
// Returns a boolean indicating if the current player is stopped.
myPlayer.stopped
// Returns a boolean indicating if the current player has finished playback.
myPlayer.ended
// Returns currentTime of the player.
myPlayer.currentTime
// Returns the duration for the current media.
myPlayer.duration
// Returns a boolean indicating if the current player is seeking.
myPlayer.seeking
// Returns the volume of the player.
myPlayer.volume
// Returns a boolean indicating if the current player is muted.
myPlayer.muted
// Returns current playRate
myPlayer.speed
// Returns mininum speed allowed
myPlayer.minimumSpeed
// Returns maximum speed allowed
myPlayer.maximumSpeed
// Returns mininum caption offset allowed
myPlayer.minimumOffset
// Returns maximum caption offset allowed
myPlayer.maximumOffset
// Returns current caption offset
myPlayer.captionOffset
// Returns current source of the player
myPlayer.source
// Set currentTime to given number(seconds)
myPlayer.currentTime = 60
// Set player's volume to given number (0.5 is half the volume)
myPlayer.volume = 0.5
// Set player's playbackRate to given number (0.1 to 8)
myPlayer.speed = 2
// Set player's caption offset to given number (-5 to 5)
myPlayer.captionOffset = 2

Changelog:

v1.1.2 (04/11/2021)

• Fixed minor bugs
• Code update

v1.1.1 (04/10/2021)

• Controls can now be hidden individually
• Reworked menu functions
• Captions can now be loaded locally (no server or upload required)
• Caption’s Engine Improved
• Fixed minor bugs