Embedding the SundaySky Player in a Webpage

In this article:
Adding the Player Script Code
Player Placement
Player Attributes
Web Analytics and Video Event Integration

SundaySky provides an HTML5 player designed for dynamic video streaming to all major desktop and mobile browsers.

In this article, you'll find instructions on how to embed the SundaySky player in your webpage.

Note.jpg
Do not attempt to modify the properties of the player by using a method other than that described in this article. If you have special requirements that are not addressed in the guidelines below, please reach out to your SundaySky Project Manager.

Adding the Player Script Code

To add the SundaySky player to your webpage, add the below code to the page.
Within the code, replace <Program ID> with the relevant value from the program. To get the Program ID, log into SundaySky, access the program, and then copy the Program ID from the URL. The Program ID (highlighted in yellow below) appears after program/ and before /overview. Each video in your account has a unique Program ID.

Program_URL.png

Note that the Program ID must be populated with the actual value in order for the video to display.

<!-- Place div (sskydiv) on your page where the video should appear -->

<div id='sskydiv'></div>

<script>
var sskyProgramID = '<Program ID>'; //

function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute('id', 'sskyplayer');
sskyplayer.setAttribute('analytics-token', sskyProgramID);
sskyplayer.setAttribute('endpoint-url', 'https://apis.sundaysky.com/get-video/player-session/'+sskyProgramID+'?'+ window.location.search);
sskyplayer.setAttribute('poster', 'https://player.sundaysky.com/poster.png');
sskyplayer.setAttribute('transcript-button', 'show');
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>

<script src=
'https://play.sundaysky.com/main/sundaysky-player.grey.en-us.min.js'>
</script>


Player Placement

On your webpage, place the div element (sskydiv) where you would like the player to appear. This div must be loaded on the page before calling the createPlayer() function shown in the code snippet above.

The player is responsive with default dimensions of 640 x 360 pixels. You can use CSS properties to override these dimensions.


Player Attributes

The player has several attributes that can be used to customize the player settings and behavior. The code above includes the attributes that are required for standard functionality. Below you can find additional common attributes for customizing the player.

Attribute Description
session-parameters

The player is set to collect all page query string parameters. This JSON object can be used to pass additional parameters to the video generation process.

In the code example following, the id parameter is used for personalizations and the Source parameter for tracking and reporting the origin or referrer of the video view. For example, the values of Source can be "email", "sms", and "portal".

Code example:
sskyplayer.setAttribute('session-parameters','{"id":"<User ID>", "channel":"<Source>"}');

poster

Set the player background image that is displayed until the viewer clicks the play button.

Code example:
sskyplayer.setAttribute('poster','<Image URL>')


Web Analytics and Video Event Integration

The video player emits events for various events within the video and player, and while the viewer interacts with the video. Event listeners can be used to trigger any JavaScript code that you define. For a complete list of events, data which can be exposed by an event, and code examples, see Integrating with Player Events.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.