How to make use of 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 doc 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 movie on the video and complete it.

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

4. Determine the scale of the video.

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

5. add captions to your video participant.

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

6. More API strategies.

// 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

Shortcuts:

A player will bind the following keyboard shortcuts when it has focus.

Custom HTML5 Video Player Optimized For Movies, Movie focused HTML5 Player Plugin/Github

See Demo And Download