mooviejs v1.1.5

◼️ Features:

• 🔧 Fully customizable and Easy-to-use
• 💎 Built-in caption offset adjust on the fly
• 🎬 Built-in support for .vtt and .srt caption files
• 🕹 Built-in Plugins, use the code that you really need!
• 🖊 Add tracks/captions dynamically using our API
• 🗃 Add tracks/captions locally on the fly (no server or upload required)
• 🌠 Adjust speed on the fly
• 🛠 Standardized events / shortcuts / API
• 🖌 Caption customization
• 💪 No dependencies, built with VanillaJS
• 🌎 Tested in all modern browsers
• 💻 Responsive
• 🗃 Integration with webtorrent.js, dash.js, Shaka Player and hls.js
• 🌎 Internationalization (i18n) of controls

◼️ Demo:

https://mooviejs.com/

◼️ Installation (Browser):

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.

◼️ Installation (NPM):

1 - Install npm package

npm i mooviejs

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.

const Moovie = require('mooviejs');
var demo = new Moovie({
     selector: "#example",
     dimensions: {
          width: "100%"
     },
     icons: {
        path: "<path/to/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/moovie.js@latest/js/moovie.min.js"></script>

// CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/css/moovie.min.css">

◼️ Captions:

Currently it has full support for WebVTT(.vtt) and SubRip(.srt).

▪️ Dynamically (Public server required)

Use the standard html as the example below (source must be in a public server with cross-origin headers).

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

▪️ Locally (No server or upload required)

Since browsers won't let you display subtitles loaded locally, you can use moovie's built-in feature that allows you to add local subtitles without a server or any kind of upload.

When loading caption files locally, be sure to save the file with UTF-8 encoding, otherwise you will encounter some decryption errors like "�"

Video Player ➔ ⚙️ ➔ Captions ➔ Load Locally

⚠️ This method DOES NOT load anything into server/folder/directory.

◼️ 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();

destroy: Remove current player and unbinds all its events

demo.destroy();

build: Build a new player

demo.build();

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"
        }
    },
    onComplete: function(){
      console.log("Completed!");
    } 
});

change: Apply changes to current player.

demo.change({
     video: {
         videoSrc: "<<path-to-video>>",
         posterSrc: "<<path-to-poster>>"
     },
     captions:{
         clearCaptions: true
     },
    onComplete: function(){
      console.log("Completed!");
    } 
});

◼️ 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

// Mute or Unmute player (boolean)
demo.muted = true

◼️ Integrations:

◼️ Events:

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

demo.video.addEventListener("canplay", (event) => {
   console.log(event);
});

◼️ Styling > Colors:

Using CSS Custom Properties you can easily customize your own player. Check below a list of variables and what they are used for:

◼️ Styling > Icons:

moovie uses .svg icons that are stored in the icons folder that is located by default in the root, however, you can specify a new location in the config options.

config: {
    icons: {
        path: "./path/to/folder/"
    }
}

Folder structure:

moovie/
├── icons/
│   ├── back.svg
│   ├── caption.svg
│   ├── cc.svg
│   ├── cog.svg
│   ├── fullscreen.svg
│   ├── mute.svg
│   ├── next.svg
│   ├── pause.svg
│   ├── play.svg
│   ├── volume.svg
|
├── css/
│   ├── moovie.css
|
├── js/
│   ├── moovie.js

◼️ Plugins:

There are external plugins you can use to add extra features. to call a plugin, follow the example below:

<!-- Include plugin path after moovie.js -->
<script src="path/to/plugin.js"></script>

by default, plugins are located in the ./js/plugins/ folder, but you can specify a new location.

// Initialize Moovie
var demo = new Moovie({selector: "#example"});

// Call External Plugin (Playlist example)
var PlaylistPlugin = new _Moovie_Playlist({reference: demo});

List of available plugins:

◼️ i18n Support:

You can translate the player to any language you want in the configurations.

config: {
    i18n : {
          play : "(Play:Pause)",
          mute : "(Mute:Unmute)",
          subtitles : "(Enable:Disable) Subtitles",
          ...
      }
}

How translation works is very simple, all text between brackets are the "changing" parts of the string, and in the left side of the ":" is the default state string.

([DEFAULT STATE]:[AFTER ACTION STATE]) [CONTINUES STRING]

Working examples:

// English
subtitles : "(Enable:Disable) Subtitles",
// Portuguese
subtitles : "(Ativar:Desativar) Legendas",
// French
subtitles: "(Activer:Désactiver) Les sous-titres"

◼️ Settings:

Full Example:

document.addEventListener("DOMContentLoaded", function() {
  var demo = new Moovie({
    selector: "#example",
    dimensions: {
         width: "100%"
    },
    config: {
        storage: {
           captionOffset: false,
           playrateSpeed: false,
           captionSize: false
        },
        controls : {
            playtime : true,
            mute : true,
            volume : true,
            subtitles : true,
            config : true,
            fullscreen : true,
            submenuCaptions : true,
            submenuOffset : true,
            submenuSpeed : true,
            allowLocalSubtitles : true  
        },
        i18n : {
            play : "(Play:Pause)",
            mute : "(Mute:Unmute)",
            subtitles : "(Enable:Disable) Subtitles",
            config : "Settings",
            fullscreen : "(Enter:Exit) Fullscreen",
            main_topic: "settings:",
            main_caption: "Captions",
            main_offset: "Caption Offset",
            main_speed: "Speed",
            main_disabled: "Disabled",
            main_default: "Default",
            caption_topic: "Captions:",
            caption_back: "Back",
            caption_load: "Load Locally",
            offset_topic: "Adjust Caption Offset",
            speed_topic: "Speed Adjust"
         }
    },
    icons: {
        path: "./path/to/folder/"
    }
  });
});

◼️ Sponsors:

Thanks to JetBrains for supporting this project with its incredible tools!