J1 VideoPlayer a complete video player engine built on top of VideoJS. It gives every video the same good-looking, skinnable player, and it adds a full playlist on top: a searchable, sortable list of videos that the viewer can play, rate, and continue from where they left off. It plays two kinds of video: native videos 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.
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.