Introduction
The SundaySky player includes different events that may be tracked via web analytics solutions or used to alter the behavior of the browser in some way. Events occur when the player loads, as the video plays (started, progress, completion), when the user interacts with buttons and many other times. To react to an event, you first listen for it to come from the player and supply a callback function which will be called by the browser when the event occurs.
Here’s a simple example:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaClicked', function(event) {
console.log('Viewer clicked the CTA: ' + event.detail.name);
});
</script>
The player element is stored in a variable myPlayer and the addEventListener method is called on it. The first argument is a string - the name of the event to listen for. Here it’s ctaClicked - that’s a click of the mouse or a tap of the finger on a video call-to-action button. The second is the callback function - here it writes a log to the console about the event, including the button name.
Please note - the sample above gets the player element using the id sskyplayer which is defined when creating the player element. It is the same id value used in SundaySky's player integration code snippets, please modify the code accordingly if a different id was used.
Here’s an example of adding the event listeners to the player initialization code:
<script>
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute( 'id' , 'sskyplayer' );
sskyplayer.setAttribute( 'analytics-token' , 'accountID' );
sskyplayer.setAttribute('endpoint-url','https://accountID.web.sundaysky.com/create_video_session');
sskyplayer.setAttribute('session-parameters','{ "id" : "110006" }');
sskyplayer.setAttribute( 'poster','https://play.sundaysky.com/resources/invitation.png' );
sskyplayer.addEventListener('ctaClicked', function(event) {
console.log('Viewer clicked the CTA: ' + event.detail.name);
});
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
Player Events
The list below contains commonly used events with a description of when they fire and additional event properties that may be available.
| Event | Event Trigger |
| ctaClicked |
Emitted when a CTA menu option was clicked. The "target" property of the Event will contain the instance of the clicked button element.
"preventDefault()": if called, the default action that should result from the click (opening of a URL in a new browser tab) will not be invoked. Use the ctaClicked event and this method to implement any action that does not open a URL in a new window. |
| ctaHide |
Emitted when a CTA menu should be hidden.
Note that this event is fired for each CTA separately. The structure remains the same to allow for backwards compatibility for legacy metadata structure, while new metadata structure allows configuring individual exact times for each CTA button to show. This event reflects the actual moment when an individual CTA is shown. |
| ctaShow |
Emitted when a CTA button should be displayed.
|
| ended |
Emitted whenever the video ends. |
| error |
Emitted whenever the player encounters an error.
|
| load | Emitted when all software components finished loading and the player component is initialized. |
| playRequested |
Emitted when the user clicks "play" for the first time. Will not be fired on videos that are set to autoplay.
|
| playStart |
Emitted when the video starts playing for the first time. Will not be triggered more than once per session.
|
| progress |
Emitted every 1% of the video duration when the video is in "playing" state, including 0% and 100%.
|
| scene |
Emitted every time the video starts playing a new scene in the video.
|
| survey |
Emitted if a <sundaysky-survey> component is connected and the survey was presented for the first time.
|
| surveySubmit |
Emitted if a <sundaysky-survey> component is connected and the survey was submitted.
|
| Time to First Frame |
Emitted when the video starts playing for the first time.
|
| transcript |
Emitted when the transcript data is made available (typically when the video starts playing).
|
| transcriptClicked |
Emitted when a transcript control-bar button was clicked. The "target" property of the Event will contain the instance of the transcript element.
|
| userAction |
Emitted every time a user interaction (button or on-screen control click/tap/press) occurs.
|
| Video Played |
Emitted when the video starts playing for the first time.
|
Code Samples
- Override the default CTA URL with a custom one:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaClicked', function(event) {
event.preventDefault();
if (event.detail.label=="<CTA name to override>")
{
window.open(“<URL To Open>”);
}
});
</script>
- Send video viewing quartile events to a 3rd party web analytics system:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('progress', function(event) {
if(event.detail.position=='0.25' || event.detail.position=='0.5' || event.detail.position=='0.75') {
SendEventToWebAnalytics(event.detail.position);
}
});
</script>
- Make an on-page CTA visible once the video CTA appears:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaShow', function(event) {
if (detail.ctaSpec[0].label=="<Your CTA Label>")
{
document.getElementById('<Page Element To Display>').style.visibility="visible";
}
});
</script>
