Jekyll One

Fulltext Search

MultiPlayer is a complete player engine built on top of VideoJS. It gives every audio and video the same good-looking, skinnable player, and it adds a full playlist on top: a searchable, sortable list of media items that the viewer can play, rate, and continue from where they left off. It plays native mp3 audio files and two kinds of video: native videos (mp4) and YouTube videos.

Overview

You do not write the player’s HTML — J1 generates it from your configuration. Still, it helps to know the parts a viewer sees, because the settings above map onto them.

The Header Bar

Every player has a slim header bar with three slots:

Show / Hide Playlist button (left)

Opens and closes the playlist panel. It is disabled and greyed out until a playlist is loaded.

Title (centre)

A short label, for example "Show Playlist".

Manage Playlists button (right)

Opens the edit panel, where the viewer can add, import, export, or clear videos.

The Playlist Panel

When opened, the playlist panel shows:

  • a search box to filter the list as you type;

  • a sort control to reorder the list;

  • a list / cards switch to change the layout;

  • a merge switch that decides whether importing adds to or replaces the list;

  • a loop switch to repeat the playlist;

  • the videos themselves, each with its poster, title, author, and a star rating.

Which of these appear depends on the matching options in the playlist: block described above.

Audio Only

YouTube videos can be played as audio only. The video is not shown — the player displays the poster picture instead — and only the smallest amount of video data is loaded. The sound plays as usual. Native audio (mp3) and native video (mp4) files are never affected by this setting.

The playlist panel carries a small Audio switch next to the list / cards switch. It appears only when the playlist holds at least one YouTube video, and the viewer’s choice is remembered for that player.

Two settings control the feature:

ui_elements.audioOnlySwitch

Shows or hides the Audio switch. Default: shown.

audio_only

The state the switch starts with. As soon as the viewer flips the switch, their choice is used instead.

set_audio_only

The state used when no switch is shown — for example when ui_elements.audioOnlySwitch is set to false. Set it to true for a player that should always play audio only, and to false for a player that should always play the video. While the switch is shown, this setting is ignored: the viewer decides. If you leave the setting out, nothing changes.

All three settings can be written for all players at once (in multiPlayer.yml) or for one player only (in multiPlayer_control.yml), where the per-player value wins.

The Edit Panel

The edit panel is where content is managed. It offers:

  • a box to paste a video link (for example a YouTube URL) to add one video;

  • an Import control to load a ready-made playlist from the server;

  • Export Playlist to save the current playlist to a file;

  • Import Playlist to load a playlist from a file on the viewer’s computer;

  • Clear Playlist to empty the list.

The Player

Below the header is the video itself. Before anything is loaded, a friendly placeholder (the VideoJS logo) is shown in its place.

You can place as many players on a page as you like. Every player has its own id (a short name such as player_1), its own playlist, and its own settings. Nothing leaks from one player to another: a video you add to player_1 never shows up in player_2. Internally each player is a separate instance of the module, created through a factory function — exactly the same idea Video.js uses.

Player 1