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.
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
Warp
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