Skip to main content
Version: 6.13.0

Yospace

Yospace is a Server-Side Ad Insertion solution. A demo for the Web SDK can be found here.

SDKs

Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDK
YesYesYesUnverifiedYesYes

Pre-requirements

Web SDK
  1. Your THEOplayer SDK needs to have the yospace module enabled.
  2. You need to include the Yospace's JavaScript SDK as this is a dependency.
Android (TV) SDK
  1. Your THEOplayer SDK needs to have the yospace module enabled.
  2. You need to include the yoAdManagement.aar and yoUtil.aar libraries in your Android project.
iOS (/tvOS) SDK
  1. Your THEOplayer SDK needs to have the yospace module enabled.
  2. You need to include the Yospace framework.

Starting Template

Web SDK

The first thing you need is a valid THEOplayer set-up. If you have no experience with setting up our player, we have an excellent getting started guide.

To get THEOplayer to work, you only need to do three things:

  1. Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working THEOplayer could like the following:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>THEOplayer Web SDK: Getting Started</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'><!-- ads THEOplayer CSS -->
</head>
<body>

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

<script type='text/javascript' src='/path/to/THEOplayer.js'></script><!-- ads THEOplayer library -->
<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element, {
libraryLocation: '/path/to/library-folder/',
license: 'your_license_here',
});

player.source = {
sources : [{
src : 'your.m3u8',
type : 'application/x-mpegurl'
}]
};

</script>
</body>
</html>

Pretty self-explanatory, isn't it?

<link rel="stylesheet" type="text/css" href="/path/to/ui.css" />
<script type="text/javascript" src="/path/to/THEOplayer.js"></script>

The two snippets above are the references to the JS and CSS library.

<div
class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"
></div>

The snippet above is your HTML container.

<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element, {
libraryLocation: '/path/to/library-folder/',
license: 'your_license_here',
});

player.source = {
sources : [{
src : 'your.m3u8',
type : 'application/x-mpegurl'
}]
};

</script>

The snippet above initializes your player, including a HLS source.

Integrating Yospace

Web SDK

Add a Yospace adConfiguration to the sources.

var yoSpaceConfiguration = {
integration: "yospace"
};
var SourceDescription = {
sources: [
{
src: "http://csm-e-ces1eurxaws101j8-iyypj6ugos2.cds1.yospace.com/csm/extlive/yospace02,sampledroid.m3u8;jsessionid=502C66F7C767AB994AFEAFADCFB822C2.csm-e-ces1eurxaws101j8-iyypj6ugos2.cds1.yospace.com?yo.br=false&yo.ac=true",
type: "application/x-mpegurl",
ssai: yoSpaceConfiguration
}
]
};

You can also access the extended Yospace API.

player.yospace.session; // the Yospace session object
player.yospace.addEventListener("sessionavailable", console.log);

You can also detect ad-related events.

player.yospace.registerPlayer({
AdBreakStart: function () {
console.log("AdBreakStart", player.yospace.session);
},
AdvertStart: function () {
console.log("AdvertStart", player.yospace.session);
},
AdvertEnd: function () {
console.log("AdvertEnd", player.yospace.session);
},
AdBreakEnd: function () {
console.log("AdBreakEnd", player.yospace.session);
},
UpdateTimeline: function () {
console.log("UpdateTimeline", player.yospace.session);
}
});
Legacy Android SDK (4.12.x)

Add a Yospace adConfiguration to the sources.

YoSpaceDescription yoSpaceDescription = new YoSpaceDescription.Builder()
.streamType(StreamType.LIVE)
// .logLevel(YoSpaceLogLevelConfiguration.Builder.yoSpaceLogLevelConfiguration().http(true).build())
.build();
TypedSource typedSource = new TypedSource.Builder()
.src("http://csm-e.cds1.yospace.com/csm/extlive/yospace02,hlssample.m3u8?yo.br=true&yo.ac=true")
.ssai(yoSpaceDescription)
.build();
SourceDescription sourceDescription = SourceDescription.Builder.sourceDescription()
.sources(typedSource)
.build();

You can also access the extended Yospace API.

⚠️ This gives you access to the Yospace Session object! Be careful with your modifications, it could affect how THEOplayer works!

theoplayer.getPlayer().getYospace().getActiveSession(); // the Yospace session object
theoplayer.getPlayer().getYospace().addEventListener(YospaceEventTypes.SESSIONCHANGED, new EventListener<SessionChangedEvent>() {
@Override
public void handleEvent(SessionChangedEvent event) {
//from this moment you can access the Yospace session object:
com.yospace.android.hls.analytic.Session currentSession =
tpv.getPlayer().getYospace().getActiveSession();
}
});

You can also detect ad-related events.

theoplayer.getPlayer().getYospace().getActiveSession().addAnalyticListener(new AnalyticEventListener() {
@Override
public void onAdvertBreakEnd(AdBreak adBreak) {

}

@Override
public void onAdvertBreakStart(AdBreak adBreak) {

}

@Override
public void onAdvertEnd(Advert advert) {

}

@Override
public void onAdvertStart(Advert advert) {

}

@Override
public void onTimelineUpdateReceived(VmapPayload vmapPayload) {

}

@Override
public void onTrackingUrlCalled(Advert advert, String s, String s1) {

}

@Override
public void onVastReceived(VastPayload vastPayload) {

}
});
iOS (/tvOS) SDK

Add a Yospace adConfiguration to the sources.

let yoSpaceConfiguration = YospaceServerSideAdInsertionConfiguration(
streamType: .live
//, logLevel: YospaceLogLevelConfiguration(id3Tags: true, rawXml: true)
)
let typedSource = TypedSource(
src: "http://csm-e.cds1.yospace.com/csm/extlive/yospace02,hlssample.m3u8?yo.br=true&yo.ac=true",
type: "application/x-mpegurl",
ssai: yoSpaceConfiguration
)
let sourceDescription = SourceDescription(source: typedSource)

You can also access the extended Yospace API.

⚠️ This gives you access to the Yospace Session object! Be careful with your modifications, it could affect how THEOplayer works!

theoplayer.yospace?.addEventListener(type: YospaceEventTypes.YOSPACE_SESSION_CHANGED, listener: { (e) in
print("Yospace session received ", e)
theo
player.yospace?.activeSession?.subscribe(toAnalyticEvents: YourYospaceAnalyticsListener())
})

You can also detect ad-related events. To use Yospace classes and object, you need to include the Yospace headers in your project as described by Yospace.

class YourYospaceAnalyticsListener : NSObject, YSAnalyticObserver {
func advertDidStart(_ advert: YSAdvert) -> [Any]? {
print("Yospace advertDidStart")
return nil
}

func advertDidEnd(_ advert: YSAdvert) {
print("Yospace advertDidEnd")
}
}

Conclusion

THEOplayer partnered with Yospace to fully pre-integrate their Server-Side Ad Insertion solution, allowing you to play their streams in a breeze.

This partnership means that we are compatible with each other: THEOplayer has a long history with and is optimized to play Yospace streams. We regularly validate our integration and are the first to know about changes to the Yospace infrastructure.

Extra resources:

  1. Server-Side Ad Insertion Pre-Integration API
  2. THEOplayer Getting Started Guide
  3. Yospace website

Related articles