JavaScript API methods for controlling UI

Here are the Soundslice JavaScript API methods for controlling the player’s UI.

Changing video position

Use the setVideoPosition method to control whether the video is above notation or to the left of notation. For example, this lets you create a UI outside the Soundslice player that lets your users toggle left-vs-top video.

The method takes an arg, an integer that specifies the video position:

• 1 — Position the video automatically (based on the player’s width).
• 2 — Put the video to the left of notation.
• 3 — Put the video above notation.

If you merely want to control the default video position at time of page load, the force_side_video and force_top_video URL parameters are simpler.

Example:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Put the video above notation.
ssiframe.postMessage('{"method": "setVideoPosition", "arg": 3}', 'https://www.soundslice.com');

Making the Soundslice player fullscreen

First, make sure the current browser/device supports web pages going fullscreen (see the getFullscreenSupport method). If the browser supports it, then you can do the following:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Go fullscreen.
ssiframe.postMessage('{"method": "setFullscreen", "arg": true}', 'https://www.soundslice.com');

// Exit fullscreen mode.
ssiframe.postMessage('{"method": "setFullscreen", "arg": false}', 'https://www.soundslice.com');