Jplayer notes

⌛ This hasn't been updated for a while, so could be outdated (particularly if it's about something that evolves constantly, such as software or research).

jPlayer is a audio+video player, using HTML5 media where possible and falling back on Flash.

Keep in mind that because of the varying underlying solutions things happen fairly automatically, but also that you do not get exact control over things like preloading, buggering, etc.

Built to interact with jQuery (or Zepto).

Browser format limitations (and Flash specs) mean that for maximum compatibility you may still need transcoding. Apparently some browsers care abotu correct MIME type, so do that.

If you can limit yourself to a specific browser, then you can get away with a lot more.

Looks and behaviour are alterable. The most basic object is invisible, you can have it as a button, bar player, playlist on top, etc.

You can have multiple instances to do things like crossfading, (and sometimes to deal with mixed collections without transcoding(verify)).

Basic use

You need

• to include jquery
• to include jplayer
• to have Jplayer.swf be reachable (path can be configured during jplayer construction, default is to expect it under ./js/)

You'll create a jquery instance, which is itself not a visible thing (at least for audio).

You can interact with that instance with commands like

$('#jplayer').jPlayer('stop')
$('#jplayer').jPlayer("setMedia",media)

...though you'll most likely you'll use the css-hooked interface, the player how to intereract via cssSelectorAncestor (typically an id selector) and the various cssSelectors (class selectors, could be left on defaults if you use these classes in your html), though you can also

The instance isn't immediately ready - you should use its ready event for or before your first control.

The easiest way to get something you can click is probably to start with the skins.

On formats, solutions, and provided

So it turns out that different browsers have different support.

A serious production server will want the most compatible solution, which is:

• choose the target browsers you want to support
• choose a set of formats so that all support at least one of them
• (pre-)transcode to all of them
• hand all along to jplayer's setMedia

You hand setMedia an object which contains keys (like mp3, oga), specifically all the ones you handed into supplied (which isn't something it tests, it's just that you really cannot guarantee it works without that being true)

if you're mixing audio and video within your playlist, then specifically either all video types, or all audio types

if you're mixing audio and video in a setMedia call, the result is probably less predictable than you want

The first entry of supplied that works in the solution will be used. In both supplied and solution, order defines priority.

If you don't want to transcode, you're only supporting a subset of browsers, almost regardless of what you do.

That is, it currently has two backends ("solutions"):

• flash

supports mp3, mp4/m4a/m4v

and flash-specific fla, flv, rtmpa, rtmpv

• html referring mostly to HTML5 audio

supports whatever the browser supports

tl;dr: Chrome is nice, FF, and Opera are decent, MS dragged their feet until 2018, Apple is annoying

(for streams only MP3 or OGA apply (sometimes both))

see also:

https://caniuse.com/#search=audio

http://hpr.dogphilosophy.net/test/index.php

Optional(verify) setMedia keys:

title

artist

poster

duration

On seeking

HTML5 browsers may allow seeking, and when it has not downloaded the entire thing (which may be intentional if large) does so via a byte-range request.

When such requests are made (which the browser may decide out of your control), failing to support them will lead to trouble.

key shortcuts

p play/pause
f fullscreen
m mute
, volume-
. volume+
l loop
Playlists
 [ previous
 ] next 
 s shuffle

jplayerplaylist

Essentially a wrapper around the creation of the base player object that returns an object that lets you manage the playlist state (add(), remove(), iterate through entries)

http://jplayer.org/latest/demo-02-jPlayerPlaylist/