Press "Enter" to skip to content

A Dedicated HTML5 Video Player Optimized For Movies | moovie.js

moovie.js – Movie Focused HTML5 Player is a fully responsive, fully customizable, cute looking movie-focused HTML5 player with support for both WebVTT (.vtt) and SubRip (.srt) captions.

Features:

  • ๐Ÿ”ง Fully customizable
  • ๐Ÿ’Ž Adjust caption compensation on the fly
  • ๐ŸŒ  Adjust speed on the fly
  • ๐ŸŽฌ Built-in support for .vtt,. srt
  • ๐Ÿ–Š Add tracks/captions dynamically
  • ๐Ÿ›  Events / Standard / API shortcuts
  • ๐Ÿ’ช No dependencies, created with VanillaJS
  • ๐ŸŒŽ Tested in all modern browsers
  • ๐Ÿ’ป Responsive

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 Moovie on the video and complete.

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

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


See Demo And Download

Official Website(BMSVieira): Click Here

This superior jQuery/javascript plugin is developed by BMSVieira. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.