Author: | BMSVieira |
---|---|
Views Total: | 2,137 views |
Official Page: | Go to website |
Last Update: | April 11, 2021 |
License: | MIT |
Preview:

Description:
A responsive, fully customizable, nice-looking, movie-focused HTML5 video player with support for both WebVTT(.vtt) and SubRip(.srt) captions.
More Features:
- Supports keyboard shortcuts.
- Useful API methods.
- Custom caption offset.
- Allows you to add tracks/captions dynamically.
- Written in Vanilla JavaScript. No dependency required.
How to use it:
1. Import the stylesheet moovie.css
and JavaScript moovie.js
.
<link rel=”stylesheet” href=”css/moovie.css” />
<script src=”js/moovie.js”></script>
2. Embed your video into the document and specify the path to captions as follows:
<video id="example" poster="poster.jpg"> <source src="movie.mp4" type="video/mp4"> <track kind="captions" label="French" srclang="fr" src="caption-fr.vtt>>"> <track kind="captions" label="English" srclang="en" src="caption-en.vtt>>"> Your browser does not support the video tag. </video>
3. Initialize the Moovie on the video and done.
document.addEventListener("DOMContentLoaded", function() { var myPlayer = new Moovie({ selector: "#example" }); });
4. Determine the dimensions of the video. Default: 700px.
document.addEventListener("DOMContentLoaded", function() { var myPlayer = new Moovie({ selector: "#example", dimensions: { width: "100%" } }); });
5. Add captions to your video player.
myPlayer.addTrack({ options : { 0: { label: 'Italian', srclang: "it", src: "1.srt" }, 1: { label: 'Spanish', srclang: "es", src: "2.vvt" } } }
6. More API methods.
// Toggle play myPlayer.togglePlay(); // Enable/disable subtitles myPlayer.toggleSubtitles(); // Enable/disable fullscreen mode myPlayer.toggleFullscreen(); // Returns player DOM element myPlayer.playerElement // Returns a boolean indicating if the current player is playing. myPlayer.playing // Returns a boolean indicating if the current player is paused. myPlayer.paused // Returns a boolean indicating if the current player is stopped. myPlayer.stopped // Returns a boolean indicating if the current player has finished playback. myPlayer.ended // Returns currentTime of the player. myPlayer.currentTime // Returns the duration for the current media. myPlayer.duration // Returns a boolean indicating if the current player is seeking. myPlayer.seeking // Returns the volume of the player. myPlayer.volume // Returns a boolean indicating if the current player is muted. myPlayer.muted // Returns current playRate myPlayer.speed // Returns mininum speed allowed myPlayer.minimumSpeed // Returns maximum speed allowed myPlayer.maximumSpeed // Returns mininum caption offset allowed myPlayer.minimumOffset // Returns maximum caption offset allowed myPlayer.maximumOffset // Returns current caption offset myPlayer.captionOffset // Returns current source of the player myPlayer.source // Set currentTime to given number(seconds) myPlayer.currentTime = 60 // Set player's volume to given number (0.5 is half the volume) myPlayer.volume = 0.5 // Set player's playbackRate to given number (0.1 to 8) myPlayer.speed = 2 // Set player's caption offset to given number (-5 to 5) myPlayer.captionOffset = 2
Changelog:
v1.1.2 (04/11/2021)
- Fixed minor bugs
- Code update
v1.1.1 (04/10/2021)
- Controls can now be hidden individually
- Reworked menu functions
- Captions can now be loaded locally (no server or upload required)
- Caption’s Engine Improved
- Fixed minor bugs