Custom HTML5 Video Player Optimized For Movies – moovie.js

Category: Javascript , Recommended | April 11, 2021
Author: BMSVieira
Views Total: 136 views
Official Page: Go to website
Last Update: April 11, 2021
License: MIT

Preview:

Custom HTML5 Video Player Optimized For Movies – moovie.js

Description:

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

You Might Be Interested In:


Leave a Reply