JPlayer

Build library

npm run build

Run demo

npm run serve

Api

Supported methods:

• setStartOffset / getStartOffset
• setEndOffset / getEndOffset
• getFrameRate / getFrameLength
• togglePlay / play / pause / next

Player events:

• ready
• resize
• offsetchanged
• sourcechanged
• modechange
• load
• beforeended / ended / offsetinitialized (offset plugin)
• playlistended (playlist plugin)
• play / pause / ended / seeked / loadedmetadata / canplay / timeupdate / progress / durationchange / ratechange (native events)

Plugin events:

• playbackRate: ratechange
• playlist: playlistchanged

Usage

Embed javascript library

<script src="~/lib/juice-js/jplayer/dist/jplayer.js" asp-append-version="true"></script>

Or import library in your own js file

import {JPlayer, Media, Source, Track, PlaylistItem } from "~/lib/juice-js/jplayer/dist/jplayer.js";

let plugins = ["bottom", "controls", "play-button", "offset", "playlist", "progress-bar", "playback-rate", 
    "overlay-sound-icon", "volume", "fullscreen", "shortcuts"];
var player = new JPlayer(document.getElementById("player0"), {
    layers: 3,
    width: '100%',
    initialHeight: 320,
    poster: "creatorflowio.png",
    // followVideoWidth: true,
    // controls: true,
    bottom:{
        state: 1
    },
    plugins: plugins,
    playlist:{
        repeatAll: true,
    },
    offset:{
        appearInControls: true
    },
    playButton: {
        // overlay: true
    },
}).ready(function(){
    console.log("player ready", this);
    if(this.playlist === undefined){
        return;
    }
    var _4channels = new Media([
        new Source("4channels.mp4", "video/mp4"),
        new Source("4channels.webm", "video/webm")
    ], [ new Track("video.vtt", "captions", "en", "English", true) ], // use native captions
    {
        startOffset: 10, endOffset: 200
    });
    var media = new Media([
        new Source("video.mp4", "video/mp4"),
        new Source("video.webm", "video/webm")
    ], [ ]);
    this.playlist.items = [
        new PlaylistItem(_4channels, {tcIn: 10, tcOut: 20}),
        new PlaylistItem(_4channels, {tcIn: 30, tcOut: 60}),
        media,
        "audio.mp4"
    ];
    this.play();
});