Moovie.js - Media player made for movies - Integration 🚀

---

---

To know more features about this player visit GitHub .

BMSVieira / moovie.js

Movie focused HTML5 Player

---

Demo ▪️ Installation ▪️ Shortcuts ▪️ API ▪️ Integrations ▪️ Events
Styling ▪️ Plugins ▪️ Custom Events ▪️ i18n ▪️ Settings

---

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

https://mooviejs.com/

◼️ Installation (Browser):

1 - Include JavaScript Source.

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

…

View on GitHub

You can download it from GitHub or if you want to use it using CDN then below are the steps.

I slightly modified this library because while integrating with jsDelivr CDN there was and icon issue(icons were not showing). You have to download and upload this to your website for the player. But now All things are shorted out 👍. #NoErrorOnUsingCDN

See File on SopPlayer :- https://github.com/SH20RAJ/Sopplayer/tree/main/mooviejs

---

◼️ Demo:

https://mooviejs.com/

◼️ Installation (Browser):

1 - Include JavaScript Source.

<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/mooviejs/js/moovie.min.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/mooviejs/css/moovie.min.css">

3 - Set HTML.

<video id="example1" 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>

Example :-

• Video :- https://bit.ly/bbsamplevideo
• Poster :- https://github.com/SH20RAJ/Sopplayer/blob/main/sample.png?raw=true
• Vtt :- https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@main/demo-template/subtitles/en.vtt

4 - Initilize.

<script>
document.addEventListener("DOMContentLoaded", function() {
   video1 = new Moovie({
      selector: "#example1",
      config: {
          controls : {
              playtime : true,
              mute : true,
              volume : true,
              subtitles : true,
              config : true,
              fullscreen : true,
              submenuCaptions : true,
              submenuOffset : true,
              submenuSpeed : true,
              allowLocalSubtitles : true
          }
      }
   });
});
</script>

Note: Do not forget to not include "icons" folder. Because the error was fixed. Here ->

BMSVieira / moovie.js

Movie focused HTML5 Player

---

Demo ▪️ Installation ▪️ Shortcuts ▪️ API ▪️ Integrations ▪️ Events
Styling ▪️ Plugins ▪️ Custom Events ▪️ i18n ▪️ Settings

---

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

https://mooviejs.com/

◼️ Installation (Browser):

1 - Include JavaScript Source.

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

…

View on GitHub

---

Customizing and Styling

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

Name	Description	Default
--moovie_main_color	Moovie main color	#3191f7
--moovie_bg_controls	Background color when hover the buttons	rgba(16, 34, 62, 0.6)
--moovie_bg_submenu	Submenu background color	#f7f7f7
--moovie_bg_cuetimer	Cuetimer background color	#2b2b2b
--moovie_submenu_options_fcolor	Submenu text color	#515151
--moovie_topic_submenu_fcolor	Submenu topic text color	#797979
--moovie_currenttime_color	CurrentTime text color	white
--moovie_submenu_options_fsize	Submenu options font size	10pt
--moovie_topic_submenu_fsize	Submenu topic font size	9pt
--moovie_currenttime_fsize	CurrentTime font size	11pt
--moovie_cuetimer_fsize	Cuetimer font size	9pt
--moovie_svgicons_width	Icons size	15px
--moovie_padding_controls	Control bar padding	13px
--moovie_caption_fcolor	Captions text color	white
--moovie_cuetimer_fcolor	Cuetimer text color	white

---

See Style Customized Demo :- https://sopplayer.sh20raj.repl.co/mooviejs/demo2.html

Checkout more Video Players :- https://www.youtube.com/playlist?list=PLFcP4G5x1z-rhG307w1iAQBFSTHa5hbRz

Demo ▪️ Installation ▪️ Shortcuts ▪️ API ▪️ Integrations ▪️ Events
Styling ▪️ Plugins ▪️ Custom Events ▪️ i18n ▪️ Settings

---

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