Version: 2.67.0

How to use?

This article explains how to use the Related Content API. This API renders visual components which allow viewers to click through to other streams.

SDK

Web SDKAndroid SDKiOS SDKtvOSAndroid TV SDKChromecast SDK
YesNoNoYesNoN/A

The Related Content API is a UI feature. It's currently unavailable on the Android (TV) SDK because the underlying THEOplayer CSS and JavaScript modules aren't activated. This means that you also can't enable it on the Android (TV) SDK by following the guide located at How to add CSS or JavaScript files to an Android/iOS project.

Code examples

Web SDK

The Related Content API was first released on THEO's Web SDK.

player.related.sources = [
{
image: "//cdn.theoplayer.com/video/vr/poster.jpg",
title: "Experience true 360/VR in THEOplayer",
duration: "2:14",
link: "//demo.theoplayer.com/vr-and-360"
},
{
image:
"//cdn2.hubspot.net/hubfs/2163521/Demo_zone/CaminandesLlamaDramaPoster.jpg",
title: "4K Streaming with THEOplayer",
duration: "1:30",
link: "//demo.theoplayer.com/4k"
},
{
image: "//cdn.theoplayer.com/video/sintel/poster.jpg",
title: "Optimally present your content with chapter markers",
duration: "1:30",
link: "//demo.theoplayer.com/chapters"
},
{
image: "//localhost/server/azure.jpg",
title: "Keep THEOplayer visible with picture-in-picture",
duration: "1:30",
link: "//demo.theoplayer.com/chapters"
},
{
image: "//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg",
title: "THEOplayer 2.X: Advertisements Tester (VAST, VPAID, VMAP)",
duration: "9:57",
link: "//demo.theoplayer.com/chapters"
},
{
image:
"//cdn2.hubspot.net/hubfs/2163521/Demo_zone/tears_of_steel_poster.jpg",
title: "CEA Closed Captions and Subtitles With THEOplayer",
duration: "12:14",
link: "//demo.theoplayer.com/closed-captions-subtitles"
},
{
title: "Go Big Screen With THEOplayer and Chromecast",
link: "//demo.theoplayer.com/chromecast",
duration: "9:57",
image: "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt1.jpg"
},
{
title: "Effortless casting with THEOplayer and AirPlay",
link: "//demo.theoplayer.com/airplay",
duration: "9:57",
image: "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt2.jpg"
},
{
title: "DRM and AES-128 content protection with THEOplayer",
link: "//demo.theoplayer.com/drm-aes-128-encryption",
duration: "LIVE",
image: "//cdn.theoplayer.com/video/big_buck_bunny/poster-alt3.jpg"
}
];
player.addEventListener("ended", function() {
if (!player.related.showing) {
setTimeout(function() {
player.related.show();
}, 1000);
}
});

Android (TV) SDK

This API is currently not available on the Android (TV) SDK.

iOS SDK

The Related Content API is available on the iOS SDK, but not on the tvOS SDK.

Related articles