Sh Raj

Posted on Feb 5, 2022 • Edited on Jul 19, 2023 • Originally published at codexdindia.blogspot.com

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

#javascript #tutorial #devops #sopplaye

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

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

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

DEV Community

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

BMSVieira / moovie.js

Movie focused HTML5 Player

◼️ Features:

◼️ Demo:

◼️ Installation (Browser):

◼️ Installation (Browser):

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

BMSVieira / moovie.js

Movie focused HTML5 Player

◼️ Features:

◼️ Demo:

◼️ Installation (Browser):

Customizing and Styling

◼️ Styling > Colors:

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

◼️ Features:

Top comments (0)