Yospace
Yospace is a Server-Side Ad Insertion solution. A demo for the Web SDK can be found here.
SDKs
| Web SDK | Android SDK | iOS SDK | tvOS SDK | Android TV SDK | Chromecast SDK |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Unverified | Yes | Yes |
Pre-requirements
Web SDK
- Your THEOplayer SDK needs to have the
yospacemodule enabled. - You need to include the Yospace's JavaScript SDK as this is a dependency.
Android (TV) SDK
- Your THEOplayer SDK needs to have the
yospacemodule enabled. - You need to include the
yoAdManagement.aarandyoUtil.aarlibraries in your Android project.
iOS (/tvOS) SDK
- Your THEOplayer SDK needs to have the
yospacemodule enabled. - 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:
- Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
- Add a container which can hold your video player with HTML.
- 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:
Related articles