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

KeyDescription
SpaceBarToggle Play
KToggle Play
FToggle Fullscreen
CToggle Captions
MToggle Mute
ArrowRightForward 5s
ArrowLeftBackward 5s
Shift+WIncrease the caption’s size
Shift+SDecrease the caption’s size
OptionDefaultDescription
play(Play:Pause)Play button
mute(Mutar:Desmutar)Mute button
subtitles(Enable:Disable) SubtitlesSubtitles button
configSettingsSettings button
fullscreen(Enter:Exit) FullscreenFullscreen button
main_topicsettings:Submenu’s topic
main_captionCaptionsSubmenu’s caption string
main_offsetCaption OffsetThe submenu’s offset string
main_speedSpeedSubmenu’s speed string
main_disabledDisabledSubmenu’s caption states
main_defaultDefaultSubmenu’s speed default state
caption_topicCaptions:Caption’s submenu topic string
caption_backBackCaption’s submenu back button
caption_loadLoad LocallyThe caption’s submenu loads the subtitles string
offset_topicAdjust Caption OffsetOffset’s submenu topic string
speed_topicSpeed AdjustSpeed’s submenu topic string

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 Usage, please go to the official website.

Share