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="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://player.ochre.io/embed/css">

JS Library

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

<script src="https://player.ochre.io/embed/js"></script>

Data-loading

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

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

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

  // load media items
  player.play([{media item object}, {media item object}]);
</script>

 

Methods

player.play([media_item_object])

Setup the player and populate with tracks.

Parameter

Example

Description

media_items array of media item objects Documentation 

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

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

Parameter

Example

Description

placeholder .ochre-player   media_items array of media item objects Documentation  player Player.init('.ochre-player')   

 

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

Position the video player on the page.

 

Examples in Use

Widget demo

https://bleepltd.github.io/ochre-player

Warp

https://warp.net/

Example data

Single audio media item
https://bleepltd.github.io/ochre-player/samples/audio_mi.json

Single video media item
https://bleepltd.github.io/ochre-player/samples/video_mi.json

Multiple audio media items
https://bleepltd.github.io/ochre-player/samples/audio_mi_list.json

Did this answer your question?