reLove

web-based client for reLive

Go back to the project home.

Embedding Examples

Styles

iframe.relive.station, iframe.relive.stream {
    width: 500px;
    height: 300px;
    border: 1px solid lightgray;
}

iframe.relive.stream.player.banner {
    height: 159px;
}

iframe.relive.stream.player {
    height: 77px;
}

These height values are approximate based on the usual default font size for desktop browsers. A small script can be used to calculate the height of the player-only versions dynamically.

1a. Station view

To get a station ID, visit a show with this project or get a URL from one of the reLive apps. The first number will always be the station ID.

<iframe class="relive station" src="/path/to/deploy/dir/embed.html#station-1">
    Your browser does not support iframes.
</iframe>

1b. Stream (show) view

To get a show+stream ID, visit a show with this project or get a URL from a reLive app. The first number will always be the station ID and the second number will always be the stream ID.

<iframe class="relive stream" src="/path/to/deploy/dir/embed.html#stream-1-3h">
    Your browser does not support iframes.
</iframe>

1c. Player and banner view

This uses the same ID as 1b, but with the shorter height the segment list and chat log are hidden leaving the header and the player.

<iframe class="relive stream player banner" src="/path/to/deploy/dir/embed.html#stream-1-3h">
    Your browser does not support iframes.
</iframe>

1d. Player only view

This uses the same ID as 1b, but with the shorter height the header, segment list, and chat log are hidden leaving only the player itself.

<iframe class="relive stream player" src="/path/to/deploy/dir/embed.html#stream-1-3h">
    Your browser does not support iframes.
</iframe>

Options

The embedded player can be configured through simple boolean flags appended to the end of the hash. Currently the only supported flag is showbackbtn which enables the button to return to the stream's station. An example is shown below.

<iframe class="relive stream player" src="/path/to/deploy/dir/embed.html#stream-1-3h|options=showbackbtn">
    Your browser does not support iframes.
</iframe>

Events

The embedded player supports events via the window.postMessage function. Events are supported to indicate initialization, start playing, pause, and get paused status. The messages.js script contains constants and utilities to aid for events though using it is not mandatory. The example below indicates how to set the player to auto-start.

var player = document.getElementById("player").contentWindow;

window.addEventListener("message", function (event) {
    if (event.data === "relive:initialized") {
        player.postMessage("relive:play", "*");
    }
});