Player Widget
Ed Boaden avatar
Written by Ed Boaden
Updated over a week ago

Adding the Player embed to your site allows users to play content from your Ochre catalogue: music release playlists, single tracks or single videos.

The player, designed to be positioned as a bar at the bottom of your site page, features track controls (play, pause, previous, next), progress, currently playing track info, volume control, playlist.

The video player displays video content when playing from video services. This can be positioned on the page independently of the player bar.

Adding the Embed

Player HTML Embed

To add the Player embed to your site, insert HTML placeholder elements for the player on your page, ideally right after the opening <body> tag.

If there are asynchronous navigation requests between pages, the player elements should be placed in a permanent section of the page so that they don't get overwritten resulting in playback stopping.

The element classes may be customised, but will need to match the placeholder param on the methods.

<div class="ochre-player"></div>
<div class="ochre-video"></div>


CSS Libraries

Insert inside the <head> tag.

<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">

JS Library

Insert inside the <body> tag, before the closing </body> tag.

<script src=""></script>


To load media into the player, you will need to import the Javascript library, and then request the following methods:

  var player = Player.init('.ochre-player');

  // load video
  Player.loadCover('.ochre-video', [{media item object}], player);

  // load media items[{media item object}, {media item object}]);



Setup the player and populate with tracks.

Player.loadCover(placeholder, [media_item_object], player)

Setup the video player; populate media items and display placeholder image.

player Player.init('.ochre-player')

Initialise player.

player.position(width, height, top, left)

Position the video player on the page.

Examples in Use

Widget demo


Example data

Did this answer your question?