The events detailed in this guide are specific to media content from SRG SSR. For information about video.js events, refer to the Video.js API documentation.
Pillarbox introduces custom events designed to enrich the video playback experience. By convention, these events are prefixed with srgssr/
.
In this tutorial, we'll explore these custom events, explaining their triggers and demonstrating how to utilize them effectively.
srgssr/blocked-segment
event
This event notifies the application when a blocked segment (e.g., restricted content) is skipped, allowing for appropriate responses such as user notifications.
Handling the Event:
player.on('srgssr/blocked-segment', function ({ data }) {
// Parsing metadata of the blocked segment
const metadata = JSON.parse(data.text);
// Log or handle the skipped segment information
console.log(`Skipped blocked segment from ${data.startTime} to ${data.endTime}`, metadata);
});
A showcase displaying a notification when a blocked segment is skipped is available here: Showcase: Detect blocked segment
srgssr/chapter
event
Triggered when the playback navigates into or out of a chapter's range, this event enables developers to update the UI dynamically to reflect current chapter information.
Handling the Event:
player.on('srgssr/chapter', function ({ data }) {
if (!data) {
console.log("Entering a range without chapters");
return;
}
// Parsing metadata of the chapter
const metadata = JSON.parse(data.text);
// Log or handle the chapter information
console.log(`Entering chapter from ${data.startTime} to ${data.endTime}`, metadata);
});
A showcase displaying the current chapter is available here: Showcase: Display current chapter
srgssr/interval
event
Activated upon entering or exiting a skippable section (like opening credits), this event enables developers to provide a skip option.
Handling the Event:
player.on('srgssr/interval', function ({ data }) {
if (!data) {
console.log('Entering a range without a skippable section');
return;
}
// Parsing metadata of the skippable interval
const metadata = JSON.parse(data.text);
// Log or handle the skippable interval information
console.log(`Entering a skippable section from ${data.startTime} to ${data.endTime}`, metadata);
});
A showcase displaying a button to skip the end credits is available here: Showcase: Skip Credits