Moovie.js - Media player made for movies - Integration 🚀
Tags: javascript, tutorial, devops, sopplaye
Published: 2022-02-05 03:51:55

<p align="center">
<img width="250" src="https://bmsvieira.github.io/moovie.js/demo-template/images/moovie_black.png">
</p>

---

{% youtube VVR1YxAYDXg%}

---

**To know more features about this player visit GitHub .**

{% github https://github.com/BMSVieira/moovie.js/ %}
---

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:

{% codepen https://codepen.io/SH20RAJ/pen/bGYwzoN %}
-
https://mooviejs.com/

◼️ Installation (Browser):
-

<b>1 - Include JavaScript Source.</b>
```html
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/mooviejs/js/moovie.min.js"></script>
```
<b>2 - Include Styles.</b>
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/mooviejs/css/moovie.min.css">
```
<b>3 - Set HTML.</b>
```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

<b>4 - Initilize.</b>
```html
<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 ->](https://github.com/SH20RAJ/Sopplayer/tree/main/mooviejs)

{% github https://github.com/BMSVieira/moovie.js/ %}

---

## Customizing and Styling 

◼️ Styling > Colors:
-

Using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS Custom Properties</a> you can easily customize your own player. 
<br>Check below a list of variables and what they are used for:

| Name | Description | Default |
| --- | --- | --- |
| `--moovie_main_color` | Moovie main color  | <img width="20px" src="https://mooviehosted.000webhostapp.com/color/maincolor.png"> `#3191f7`|
| `--moovie_bg_controls` | Background color when hover the buttons | `rgba(16, 34, 62, 0.6)`|
| `--moovie_bg_submenu` | Submenu background color  | <img width="20px" src="https://mooviehosted.000webhostapp.com/color/submenu.png"> `#f7f7f7`|
| `--moovie_bg_cuetimer` | Cuetimer background color  | <img width="20px" src="https://mooviehosted.000webhostapp.com/color/submenotext.png"> `#2b2b2b`|
| `--moovie_submenu_options_fcolor`| Submenu text color  | <img width="20px" src="https://mooviehosted.000webhostapp.com/color/submenotext.png"> `#515151`|
| `--moovie_topic_submenu_fcolor` | Submenu topic text color  | <img width="20px" src="https://mooviehosted.000webhostapp.com/color/topiccolor.png"> `#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


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

---

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