BMSVieira / Moovie.js

Demo ▪️ Installation ▪️ Shortcuts ▪️ API ▪️ Events ▪️ Settings

◼️ Features:

• 🔧 Fully customizable
• 💎 Built-in caption offset adjust on the fly
• 🌠 Adjust speed on the fly
• 🎬 Built-in support for .vtt and .srt caption files
• 🖊 Add tracks/captions dynamically
• 🛠 Standardized events / shortcuts / API
• 🖌 Caption customization
• 💪 No dependencies, built with VanillaJS
• 🌎 Tested in all modern browsers
• 💻 Responsive

◼️ Demo:

https://bmsvieira.github.io/moovie.js/

◼️ Installation:

1 - Include JavaScript Source.

<script src="path/to/moovie.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="path/to/moovie.css">

3 - Set HTML.

<video id="example" poster="<<path-to-poster>>">
  <source src="<<path-to-file.mp4>>" type="video/mp4">
  <track kind="captions" label="Portuguese" srclang="pt" src="<<path-to-caption.vtt>>">
  <track kind="captions" label="English" srclang="en" src="<<path-to-caption.vtt>>">
  Your browser does not support the video tag.
</video>

4 - Initilize.

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

Note: Do not forget to include "icons" folder.

◼️ CDN:

You can use our CDN (provided by JSDelivr) for the JavaScript and CSS files.

// Javascript
<script src="https://cdn.jsdelivr.net/gh/BMSVieira/[email protected]/js/moovie.min.js"></script>

// CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/[email protected]/css/moovie.min.css">

◼️ Captions:

Currently it has full support for WebVTT(.vtt) and SubRip(.srt).
To add a track use the standard html as the example below.

<track kind="captions" label="<<Language>>" srclang="<<SourceLang>>" src="<<path-to-caption.vtt/.srt>>">

◼️ Caption Offset Adjust:

It is possible to adjust the offset by a total of 10 seconds (-5 / +5) on the fly.

◼️ Shortcuts:

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

◼️ API > Methods:

togglePlay: Play/Pause video

demo.togglePlay();

toggleSubtitles: Enable/Disable subtitles

demo.toggleSubtitles();

toggleFullscreen: Enable/Disable fullscreen

demo.toggleFullscreen();

addTrack: Add multiple/single captions to player

demo.addTrack({
  options : {
        0: {
            label: 'Italian',
            srclang: "it",
            src: "<<path-to-file.vtt/.srt"
        },
        1: {
            label: 'Spanish',
            srclang: "es",
            src: "<<path-to-file.vtt/.srt"
        }
    }
}

change: Apply changes to current player.

demo.change({
     video: {
         videoSrc: "<<path-to-video>>",
         posterSrc: "<<path-to-poster>>"
     },
     captions:{
         clearCaptions: true
     }
});

◼️ API > Gets:

// Returns player DOM element
demo.playerElement

// Returns a boolean indicating if the current player is playing.
demo.playing

// Returns a boolean indicating if the current player is paused.
demo.paused

// Returns a boolean indicating if the current player is stopped.
demo.stopped  

// Returns a boolean indicating if the current player has finished playback.
demo.ended    

// Returns currentTime of the player. 
demo.currentTime

// Returns the duration for the current media.
demo.duration

// Returns a boolean indicating if the current player is seeking.
demo.seeking

// Returns the volume of the player.
demo.volume

// Returns a boolean indicating if the current player is muted.
demo.muted

// Returns current playRate 
demo.speed

// Returns mininum speed allowed
demo.minimumSpeed

// Returns maximum speed allowed
demo.maximumSpeed

// Returns mininum caption offset allowed
demo.minimumOffset

// Returns maximum caption offset allowed
demo.maximumOffset

// Returns current caption offset
demo.captionOffset

// Returns current source of the player
demo.source

◼️ API > Sets:

// Set currentTime to given number(seconds)
demo.currentTime = 60

// Set player's volume to given number (0.5 is half the volume)
demo.volume = 0.5

// Set player's playbackRate to given number (0.1 to 8)
demo.speed = 2

// Set player's caption offset to given number (-5 to 5)
demo.captionOffset = 2

◼️ Events:

Using Standard Media Events you can listen for events on the target element you setup. check the example below:

demo.video.addEventListener("canplay", function() {
    // Your Code Here
}, true);

◼️ Settings:

Full Example:

document.addEventListener("DOMContentLoaded", function() {
  var demo = new Moovie({
    selector: "#example",
    dimensions: {
         width: "100%"
    },
    config: {
        storage: {
           captionOffset: false,
           playrateSpeed: false,
           captionSize: false,
           captionPosition: false
        }
    }
  });
});