1. Iframe embed

This is the easiest way to deploy our player. All of the player features will work, but you will not be able to do custom changes with your own javacript code or listed to player events, like: play, pause, buffer e.t.c.

Simply copy the iframe code from the "EMBED CODE" side tab and put it in the HTML code of your page.

Example of iframe code: <iframe allow="autoplay;picture-in-picture;xr-spatial-tracking;encrypted-media" src="https://embed.cloudycdn.services/telia/media/test_asset/?player=regular&protocol=hls" width="640" height="360" frameborder="0" allowfullscreen></iframe>

2. Javascript embed

This is a more advanced way to embed the player into your page. If you use this method, then you have full control of the player throught your own custom javascript code. You can modify the player visuals and listen to the player events.

In order to use the javascript embed you need to add these things to your page:

You need to include our base player script. Keep in mind, that {CLIENT SHORT NAME HERE} needs to be replaced with your client short name. You can get the short name by going to "Settings" → "Client settings" → "Main settings".
Code to add to your the page: <script type="text/javascript" src="https://embed.cloudycdn.services/player/base.js" data-teliaclient="{CLIENT SHORT NAME HERE}"></script>
For each consecutive player in the page you need to add one of the further explained players 2.1.1 or 2.1.2.

A full page example that contains 2 player, where one is initiated from HTML and the other from JS, can be found below in section 2.4.

2.1.1 Initiated from HTML

The player can be initiated from HTML values and is created by only creating a <div> that has class "TeliaPlayer" and configuration option values as data-* fields.

Example: <div class="TeliaPlayer" data-media="url_of_media"></div>

All the available data-* values can be found below in section 2.2.

If you are using this method instead of "Initiated by JS", but still want to access the TeliaPlayer object, then you can do so with: $('some_selector_that_gets_the_div_element').data('teliaPlayerObject')

2.1.2 Initiated from JS

The player can be initiated from a JS function call by creating a <div> and giving it some unique identifier like an "id" field.

After that you can run either the JS function TeliaPlayer.Create(htmlElement, optionsObject, callback) or if you are using jQuery, then the jQuery function $('selectorForTheDIV').teliaPlayer(optionsObject, callback)

OptionsObject available values can be found below in section 2.2.

The callback function will only run when the player has fully initiated. It will NOT run if the asset doesn't exist, the user hasn't yet typed in an embed password e.t.c. Only when the player has fully loaded and is ready to play.

Both the JS function and JQuery function return a TeliaPlayer object. The callback function also includes the TeliaPlayer object as the 1st parameter. More information about the TeliaPlayer object can be found below in section 2.3.

Example:

<div id="js-TeliaPlayer1"></div>
<script>
// Regular JS
document.addEventListener('DOMContentLoaded', function() {
TeliaPlayer.Create(document.querySelector('#iframe-player'), {
'media': 'url_of_media',
'manifest': '3979',
}, function(teliaPlayerObject) {
console.log(teliaPlayerObject);
});
});

// Or with jQuery
$(function() {
let player = $('#js-TeliaPlayer1').teliaPlayer({
'media': 'url_of_media',
'manifest': '3979',
}, function(teliaPlayerObject) {
console.log(teliaPlayerObject);
});
});
</script

2.2 Player options

These are options that can be added to the embed URL or as a parameter to the JS embed to override some functions.

Some of these options will only work if the "Player preset" assigned to the asset has "Allow URL override" enabled.

media: Url of the media asset
channel: Url of the channel
record: Url of the recording
manifest: Manifest ID. Defaults to media default manifest (Requires "Allow URL override")
bitrate: Start on a specific bitrate ID. Defaults to automatic detection (Requires "Allow URL override")
protocol: Manifest protocol (dash or hls). Defaults to hls (Requires "Allow URL override")
playertype: Player type (regular or vr). Defaults to regular (Requires "Allow URL override")
embedpassword: Bypassed embed password input if correct password
embedtoken: Embed token for use if media has "Use token for embed" enabled
adkeywords: Replaces [ADKEYWORDS] in AD urls with this provided string
uid: Unique user ID for Youbora analytics
autoplay: If set the player will autoplay (Requires "Allow URL override")
mute: If set the player will start muted (Requires "Allow URL override")
loop: If set the playback will start over again when it reaches end (Requires "Allow URL override")
autosubs: If set to 3 letter language code, then player will auto play those subtitles (Requires "Allow URL override")
starttime: Number at what seconds to start playback. Set to "random" to start at a random place each time

2.3 TeliaPlayer object

TeliaPlayer object contains the data, function and other objects that make the player run.

In further examples the "teliaPlayerObject" is the object that is returned either by the player creation function or returned by the callback.

Values:

teliaPlayerObject.THEOplayer = The theoplayer object.
teliaPlayerObject.isPlayingAd = If the player is currently playing an AD
teliaPlayerObject.itemData = Data for the media/channel that is playing
teliaPlayerObject.element = The HTML element that the telia player was created on
teliaPlayerObject.status = Status of the player: created, error, not_available, success, destroyed
teliaPlayerObject.id = ID of the player. Corresponds to a key in TeliaPlayer.players array

Functions:

teliaPlayerObject.message(string|false) = Passed string is message. Shows a message in front of the player. Pass false to remove
teliaPlayerObject.poster(string|false) = Passed string is URL. Shows a poster in front of the player. Pass false to remove or pass no parameter to show a black poster.
teliaPlayerObject.error(string) = Passed string is message. Sets player as error status and shows message
teliaPlayerObject.empty() = Stops playback, empties the player and sets status to 'destroyed'

2.4 Full page example

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player test page</title>


<style>
.TeliaPlayer {
display: block;
width: 400px;
height: 200px;
border: 2px solid red;
background: green;
position: relative;
resize: both;
overflow: auto;
}
</style>
</head>
<body>

<script type="text/javascript" src="https://embed.cloudycdn.services/player/base.js" data-teliaclient="telia"></script>





<div class="TeliaPlayer" data-media="96u_Asset123_FrasierS01E01"></div>






<div id="js-TeliaPlayer1"></div>
<script>
$(function() {
// Alternative to $('#js-TeliaPlayer1').teliaPlayer(dataObject, callback) -> TeliaPlayer.Create(htmlElement, options, callback);
// returned value for both versions is the TeliaPlayer object
let player = $('.js-TeliaPlayer1').teliaPlayer({
'media': '96u_Asset123_FrasierS01E01',
//'manifest': '3979',
'adkeywords': 'TestKeyword1'
//'bitrate': '22052'
}, function(teliaPlayerObject) { // Returned value is the same object that .teliaPlayer returns.
// This callback is only ran when the theoplayer is fully initialized.
// It will NOT run in cases where the request for media info failed,
// an embed password popup shows(It will still run after correct password is entered and player has loaded) or other reasons
console.log('Player created');

console.log(teliaPlayerObject);

// Useful values in the teliaPlayerObject are:
// teliaPlayerObject.THEOplayer | The theoplayer object
// teliaPlayerObject.isPlayingAd | If the player is currently playing an AD
// teliaPlayerObject.itemData | Data for the media/channel that is playing
// teliaPlayerObject.element | The HTML element that the telia player was created on
// teliaPlayerObject.status | Status of the player: created, error, not_available, success, destroyed
// teliaPlayerObject.id | ID of the player. Corresponds to a key in TeliaPlayer.players array

// Useful function on the teliaPlayerObject are:
// teliaPlayerObject.message(string|false) | Passed string is message. Shows a message in front of the player. Pass false to remove
// teliaPlayerObject.poster(string|false) | Passed string is URL. Shows a poster in front of the player. Pass false to remove or pass no parameter to show a black poster.
// teliaPlayerObject.error(string) | Passed string is message. Sets player as error status and shows message
// teliaPlayerObject.empty() | Stops playback, empties the player and sets status to 'destroyed'
});
});
</script>
</body>
</html>

Page tree

Player embedding