10

Github GitHub - BMSVieira/moovie.js: Movie focused HTML5 Player

 3 years ago
source link: https://github.com/BMSVieira/moovie.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

moovie.js - Movie focused HTML5 Player

black_medium_square Features:

  • wrench Fully customizable
  • gem Built-in caption offset adjust on the fly
  • stars Adjust speed on the fly
  • clapper Built-in support for .vtt and .srt caption files
  • pen Add tracks/captions dynamically
  • hammer_and_wrench Standardized events / shortcuts / API
  • muscle No dependencies, built with VanillaJS
  • earth_americas Tested in all modern browsers
  • computer Responsive

black_medium_square Coming soon:

  • fire Caption customization
  • fire Remove tracks/captions dynamically

black_medium_square Demo:

https://bmsvieira.github.io/moovie.js/

black_medium_square Installation:

1 - Include JavaScript Source.

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

2 - Include Styles.

<link rel="stylesheet" href="path/to/moovie.css">

4 - 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>

3 - Initilize.

document.addEventListener("DOMContentLoaded", function() {
   var demo = new Moovie({
     selector: "#example",
     dimensions: {
          width: "100%"
     }
   });
});

black_medium_square 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">

black_medium_square Captions:

Currently it has full support for WebVTT(.vtt) and SubRip(.srt).
To add a track use the standard html as the example below.

<track kind="captions" label="<<Language>>" srclang="<<SourceLang>>" src="<<path-to-caption.vtt/.srt>>">

black_medium_square Caption Offset Adjust:

It is possible to adjust the offset by a total of 10 seconds (-5 / +5) on the fly.

black_medium_square Shortcuts:

Key Description SpaceBar Toggle Play K Toggle Play F Toggle Fullscreen → Forward 5 seconds ← Backward 5 seconds M Toggle Mute

black_medium_square API > Methods:

togglePlay: Play/Pause video

demo.togglePlay();

toggleSubtitles: Enable/Disable subtitles

demo.toggleSubtitles();

toggleFullscreen: Enable/Disable fullscreen

demo.toggleFullscreen();

addTrack: Add multiple/single captions to player

Name Default Description label New Subtitle Name of the new subtitle in the caption box srclang New Country designation src --- 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"
        }
    }
}

black_medium_square 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

black_medium_square 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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK