SundaySky provides an HTML5 player designed for dynamic video streaming to all major desktop and mobile browsers. The player is responsive with default dimensions of 640 x 360 pixels. You can use CSS properties to overwrite these dimensions.
In this article, you'll find instructions on how to embed the SundaySky player in your webpage.
Warning:
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
|
Step 1: Get the video ID of the video that you want to play on the webpage.
|
| 1. |
In Your Videos, locate the relevant video.
|
| 2. |
Click the video thumbnail.
|
| |
|
| 3. |
Make sure that the video is published.
|
| 4. |
Copy the string at the end of the URL and keep it on the side. This is the video ID that you will need for step 3.
▶ Each video in your account has a unique video ID.
|
| |
|
|
Step 2: Copy and place the player code.
|
| 1. |
Copy the code below.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video 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>
|
2. |
On your webpage, place the div element (sskydiv) where you want the player to appear. This div (displayed in green below) must be loaded on the page before calling the createPlayer() function.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video 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>
|
|
Step 3: Customize the code.
|
| 1. |
In the code, look for <Video ID> (displayed in blue below).
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video 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>
|
2. |
Replace <Video ID> with the video ID that you retrieved in step 1. Make sure to also delete the brackets < > that appear in the original code.
▶ Following is an example of how this string looks after it is replaced with an actual value.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = 'fe191575-8b68-4dcc-9c3d-a9cfe496fa2f'; //
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>
|
3.a. |
(Optional) Set the player background image that is displayed until the viewer clicks the play button.
|
Click to see the default image that is displayed.
| 3.b. |
In the code, look for https://player.sundaysky.com/poster.png (displayed in blue below).
▶ This is the URL of the default image.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video 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>
|
3.c. |
Replace the entire string with the URL of the custom image that you created.
▶ Following is an example of how this string looks after it is replaced with a new value.
|
|
<div id='sskydiv'></div>
<script>
var sskyProgramID = '<Video 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://a7bab7fd-1769-475e-939e-15f94591d498.images.sundaysky.com/poster/image.jpg?format=jpg');
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>
|
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.
