reLove

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, get information on streams, and status changes. 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.

Sending Events

All events should be sent after the initialized event is received, but the config event can and probably should be sent after the loaded event. See the next section for those events.

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

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

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

window.addEventListener("message", function (event) {
    if (event.data === "relive:loaded") {
        var message = JSON.stringify({

            // Any valid CSS background value.
            background: "dodgerblue",
            headerBackground: "linear-gradient(to right, #00bcd4, #999)",
            playerBackground: "hotpink",
            chatBackground: "wheat",

            // Any valid CSS <color> value.
            loadingColor: "limegreen",
            playerColor: "wheat",
            chatColor: "hotpink",

            // Default is "${station.name}: ${stream.streamName}"
            // Any properties available on the station and stream objects can be used.
            // It's a simple find-and-replace so no code is allowed inside the braces.
            titleFormat: "${stream.streamName}",
        });
        player.postMessage("relove:config|" + message, "*");
    }
});

Receiving Events

All event with data will always send valid JSON. You can check/parse as below.

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

window.addEventListener("message", function (event) {
    if (event.data.startsWith("relive")) {
        var message = event.data.split("|");
        var event = message[0];
        var data = message.length > 1 ? JSON.parse(message[1]) : null;
        console.log(event, data.value, data.error);
    }
});

Event Errors

Sometimes there may be an error when sending an event. It could be event data was sent that wasn't valid JSON, or some other error occurred trying to effect the requested event.

All events will come with either a value or error property, not both. If an error was caused in response to an event sent by postMessage, that is used as the error's event type. If it was caused outside of that, the event type is relive:error

Error objects will contain a type and a value property. The former is just for classifying the type of event, and the value contains a hopefully useful message.