<a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-demo">Demo</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-installation-browser">Installation</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-shortcuts">Shortcuts</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-api--methods">API</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-integrations">Integrations</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-events">Events</a> <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-styling">Styling</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-plugins">Plugins</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-custom-events">Custom Events</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-i18n-support">i18n</a> ▪️ <a href="https://github.com/BMSVieira/moovie.js#%EF%B8%8F-settings">Settings</a>

◼️ 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!
🎯 Built-in CustomEvents, add multiple events that will run a specific currentTime
🖊 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:

Demo here

◼️ 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. <img width="500" src="https://bmsvieira.github.io/moovie.js/demo-template/images/captionoffset.png">

◼️ Shortcuts:

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

| Key | Description | | --- | --- | | SpaceBar | Toggle Play| | K | Toggle Play | | F | Toggle Fullscreen| | C | Toggle Captions| | M | Toggle Mute | | ArrowRight | Forward 5s | | ArrowLeft | Backward 5s | | Shift+W| Increase caption's size| | Shift+S| Decrease caption's size|

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

| Name | Type | Default | Description | | --- | --- |--- | --- | | label | string | New Subtitle | Name of the new subtitle in the caption box | | srclang | string | New | Country designation | | src | string | --- | Path to the file [Can not be empty] |

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.

| Name | Type | Description | | --- | --- | --- | | video > videoSrc | string | New video's source| | video > posterSrc | string | New poster's source | | captions > clearCaptions | boolean | Remove all available captions in the menu |

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:

| | Name & Info | Example | | :-: | :-: | --- | |<img width="35" src="https://upload.wikimedia.org/wikipedia/en/thumb/7/79/WebTorrent_logo.png/220px-WebTorrent_logo.png">| WebTorrent For more info read <a href="https://webtorrent.io/intro" target="_blank">WebTorrent</a> documentation. | Codepen| |<img width="120" src="http://reference.dashif.org/dash.js/latest/samples/lib/img/dashjs-logo.png">| dash.js For more info read <a href="https://reference.dashif.org/dash.js/latest/samples/index.html" target="_blank">dash.js</a> documentation. | Codepen| |<img width="80" src="https://raw.githubusercontent.com/google/shaka-player/master/docs/shaka-player-logo.png">| Shaka Player For more info read <a href="https://github.com/google/shaka-player" target="_blank">Shaka Player</a> documentation. | Codepen| |<img width="80" src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png">| hls.js For more info read <a href="https://github.com/video-dev/hls.js/" target="_blank

Moovie.js

Install / Use

README