diff --git a/package-lock.json b/package-lock.json
index a2f5bfe..93c5034 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@srgssr/pillarbox-web": "^1.0.1",
+        "@srgssr/pillarbox-web": "^1.1.0",
         "highlight.js": "^11.9.0",
         "lit": "^3.1.1",
         "material-icons": "^1.13.12",
@@ -1739,9 +1739,9 @@
       ]
     },
     "node_modules/@srgssr/pillarbox-web": {
-      "version": "1.0.1",
-      "resolved": "https://npm.pkg.github.com/download/@srgssr/pillarbox-web/1.0.1/66c4f497e5ee04d495fd2007110f9cfccf5bd437",
-      "integrity": "sha512-4MitZ6iMtYWLjWJUlTnFGz5Ap3v3zJ8AFUyH1+yQpJjdwfd4yUePv5umNkte20rpdMF0iBleMu4L7IPklsHOvA==",
+      "version": "1.1.0",
+      "resolved": "https://npm.pkg.github.com/download/@srgssr/pillarbox-web/1.1.0/3001926a2ae32e2996b39e690634e06e45252ebe",
+      "integrity": "sha512-hZG/iPyA4HK/Fzy7iPMxKFuc1Ed40mn7bUD05tVi185d3AsiXZbrcpRfRT7vJo/NeBAzFY+s3tQsOqI6aYMaDQ==",
       "license": "MIT",
       "dependencies": {
         "video.js": "^8.11.1",
diff --git a/package.json b/package.json
index 348b9fb..79c126f 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "vite": "^5.0.12"
   },
   "dependencies": {
-    "@srgssr/pillarbox-web": "^1.0.1",
+    "@srgssr/pillarbox-web": "^1.1.0",
     "highlight.js": "^11.9.0",
     "lit": "^3.1.1",
     "material-icons": "^1.13.12",
diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js
index 1776b0b..3d84c3c 100644
--- a/src/layout/content/showcase/showcase-page.js
+++ b/src/layout/content/showcase/showcase-page.js
@@ -5,19 +5,30 @@ import './showcase-component.js';
 import '../../../components/code-block/code-block';
 import showcasePageCss from './showcase-page.scss?inline';
 import rawStartTimeExample from '../../../../static/showcases/start-time.html?raw';
-import raeMultiPlayerExample from '../../../../static/showcases/multi-player.html?raw';
+import rawMultiPlayerExample from '../../../../static/showcases/multi-player.html?raw';
+import rawDetectBlockedSegmentsExample from '../../../../static/showcases/blocked-segment.html?raw';
+import rawDisplayCurrentChapterExample from '../../../../static/showcases/chapters.html?raw';
+import rawSkipCreditsExample from '../../../../static/showcases/skip-credits.html?raw';
 import { getTextFromHTML } from './example-parser.js';
 
 const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample);
-const multiPlayerExampleTxt = getTextFromHTML(raeMultiPlayerExample);
+const multiPlayerExampleTxt = getTextFromHTML(rawMultiPlayerExample);
+const detectBlockedSegmentsExampleTxt =
+  getTextFromHTML(rawDetectBlockedSegmentsExample);
+const displayCurrentChapterExampleTxt =
+  getTextFromHTML(rawDisplayCurrentChapterExample);
+const skipCreditsExampleTxt = getTextFromHTML(rawSkipCreditsExample);
 
 export class ShowCasePage extends LitElement {
   static styles = [theme, animations, unsafeCSS(showcasePageCss)];
 
   render() {
     return html`
-        ${this.#renderStartTime()}
-        ${this.#renderMultiplePlayers()}
+      ${this.#renderStartTime()}
+      ${this.#renderMultiplePlayers()}
+      ${this.#renderDetectBlockedSegments()}
+      ${this.#renderDisplayCurrentChapter()}
+      ${this.#renderSkipCredits()}
     `;
   }
 
@@ -45,21 +56,82 @@ export class ShowCasePage extends LitElement {
 
   #renderMultiplePlayers() {
     return html`
-      <div class="fade-in" @animationend="${e => e.target.classList.remove('fade-in')}">
-      <showcase-component href="multi-player.html">
-        <h2 slot="title">Multiple Players</h2>
-        <p slot="description">
-          This example demonstrates how to incorporate multiple video players
-          on a webpage.In this showcase, two players are initialized, each
-          with its own configuration, a button allows to toggle the mute state
-          for both players.
-        </p>
-        <code-block slot="code" language="javascript">${multiPlayerExampleTxt}</code-block>
-      </showcase-component>
-      <a href="./static/showcases/multi-player.html" target="_blank">
-        Open this showcase
-      </a>
-    </div>
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="multi-player.html">
+          <h2 slot="title">Multiple Players</h2>
+          <p slot="description">
+            This example demonstrates how to incorporate multiple video players
+            on a webpage.In this showcase, two players are initialized, each
+            with its own configuration, a button allows to toggle the mute state
+            for both players.
+          </p>
+          <code-block slot="code" language="javascript">${multiPlayerExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/multi-player.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderDetectBlockedSegments() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="blocked-segment.html">
+          <h2 slot="title">Detect Blocked Segments</h2>
+          <p slot="description">
+            This tutorial covers how to use pillarbox to create a plugin that
+            detects and notifies when a blocked segment is skipped.
+          </p>
+          <code-block slot="code" language="javascript">${detectBlockedSegmentsExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/blocked-segment.html"
+           target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderDisplayCurrentChapter() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="chapters.html">
+          <h2 slot="title">Display Current Chapter</h2>
+          <p slot="description">
+            This showcase explains how to use pillarbox to create a plugin that
+            displays the currently playing chapter in a box above the progress
+            bar.
+          </p>
+          <code-block slot="code" language="javascript">${displayCurrentChapterExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/chapters.html"
+           target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderSkipCredits() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="skip-credits.html">
+          <h2 slot="title">Skip Credits</h2>
+          <p slot="description">
+            This example shows how to use pillarbox to create a plugin that adds
+            a "Skip" button during detected credit intervals.
+          </p>
+          <code-block slot="code" language="javascript">${skipCreditsExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/skip-credits.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
     `;
   }
 }
diff --git a/static/showcases/blocked-segment.html b/static/showcases/blocked-segment.html
new file mode 100644
index 0000000..4aed58d
--- /dev/null
+++ b/static/showcases/blocked-segment.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Detect blocked segment</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./blocked-segment.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Detect blocked segment</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  // Register a plugin to display notifications on blocked segments
+  pillarbox.registerPlugin('blockedSegmentNotification', function(options) {
+    // Get a reference to the player instance
+    const player = this;
+
+    // Wait for the player to be ready
+    player.ready(() => {
+      // Create a component for displaying the blocked segment notification
+      const blockSegmentNotification = player.addChild('component', {
+        className: 'pbw-blocked-segment-notification'
+      });
+
+      // Hide the notification initially
+      blockSegmentNotification.hide();
+
+      // Variable to store the timeout ID for clearing later
+      let timeoutId = undefined;
+
+      // Listen for the 'loadeddata' event on the player, this ensures that text tracks are available
+      player.on('loadeddata', () => {
+        // Get the text track with the ID 'srgssr-blocked-segments'
+        const blockedSegments = player.textTracks().getTrackById('srgssr-blocked-segments');
+
+        // Add a listener for the 'cuechange' event on the blocked segments text track
+        blockedSegments?.on('cuechange', () => {
+          // Check if there are active cues in the blocked segments text track
+          if (blockedSegments.activeCues.length > 0) {
+            // If there is an existing timeout, clear it
+            if (timeoutId) clearTimeout(timeoutId);
+
+            // Parse the JSON content of the active cue to get the blocked segment information
+            const blockSegment = JSON.parse(blockedSegments.activeCues[0].text);
+            const blockReason = blockSegment.blockReason;
+
+            // Update the displayed notification text with the appropriate message based on the block reason
+            blockSegmentNotification.el().textContent = options.i18n[blockReason] ?? options.i18n['UNKNOWN'];
+
+            // Show the blocked segment notification
+            blockSegmentNotification.show();
+
+            // Set a timeout to hide the notification after a specified delay
+            timeoutId = setTimeout(() => {
+              blockSegmentNotification.hide();
+              timeoutId = undefined;
+            }, options.delay);
+          }
+        });
+      });
+    });
+  });
+
+  // Create a pillarbox player instance with the blockedSegmentNotification plugin
+  const player = pillarbox(
+    'video-element-id', {
+      fill: true,
+      plugins: {
+        blockedSegmentNotification: {
+          delay: 5000, // Delay in milliseconds before hiding the notification
+          i18n: { // Labels for different block reasons
+            STARTDATE: 'ⓘ A portion of the video is not yet available',
+            ENDDATE: 'ⓘ A section of the video has expired',
+            LEGAL: 'ⓘ For legal reasons, a section of the video content is omitted',
+            COMMERCIAL: 'ⓘ A commercial break has been excluded',
+            GEOBLOCK: 'ⓘ This segment of the video is not accessible in your region',
+            AGERATING18: 'ⓘ A segment suitable for 18 years and older is omitted',
+            AGERATING12: 'ⓘ A segment suitable for 12 years and older is omitted',
+            UNKNOWN: 'ⓘ Due to an unidentified issue, a segment of the video is omitted.'
+          }
+        }
+      }
+    }
+  );
+
+  // Load the video source for the player
+  player.src({ src: 'urn:rts:video:10894383', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/blocked-segment.scss b/static/showcases/blocked-segment.scss
new file mode 100644
index 0000000..11f9738
--- /dev/null
+++ b/static/showcases/blocked-segment.scss
@@ -0,0 +1,16 @@
+.pbw-blocked-segment-notification {
+  position: absolute;
+  right: var(--size-5);
+  bottom: var(--size-9);
+  display: flex;
+  align-items: center;
+  height: var(--size-6);
+  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-3);
+  backdrop-filter: blur(5px);
+  padding-inline: var(--size-2);
+}
+
+
diff --git a/static/showcases/chapters-showcase.scss b/static/showcases/chapters-showcase.scss
new file mode 100644
index 0000000..d9b54fc
--- /dev/null
+++ b/static/showcases/chapters-showcase.scss
@@ -0,0 +1,43 @@
+.pbw-current-chapter {
+  position: absolute;
+  top: calc(var(--size-8) * -1);
+  left: var(--size-4);
+  display: flex;
+  width: var(--size-15);
+  height: var(--size-9);
+  color: white;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-3);
+  backdrop-filter: sepia(50%);
+}
+
+.vjs-layout-medium {
+  .pbw-current-chapter {
+    width: var(--size-14);
+  }
+}
+
+.vjs-layout-tiny,
+.vjs-layout-x-small,
+.vjs-layout-small {
+  .pbw-current-chapter {
+    display: none;
+  }
+}
+
+.pbw-chapter-title {
+  display: -webkit-box;
+  padding: var(--size-1) var(--size-2);
+  overflow: hidden;
+  font-weight: var(--font-weight-3);
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+
+.pbw-chapter-thumbnail {
+  border-top-left-radius: var(--radius-2);
+  border-bottom-left-radius: var(--radius-2);
+  box-shadow: var(--inner-shadow-3);
+}
diff --git a/static/showcases/chapters.html b/static/showcases/chapters.html
new file mode 100644
index 0000000..7a22e4d
--- /dev/null
+++ b/static/showcases/chapters.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Display Current Chapter</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./chapters-showcase.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Display Current Chapter</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  // Register a plugin to display the currently playing chapter
+  pillarbox.registerPlugin('currentChapter', function() {
+    // Get a reference to the player instance
+    const player = this;
+
+    // Wait for the player to be ready
+    player.ready(() => {
+      // Create a new component to display the current chapter information
+      const currentChapterComponent = player.getChild('ControlBar').addChild('component');
+      currentChapterComponent.addClass('pbw-current-chapter');
+
+      // Create an image element for the chapter thumbnail
+      const thumbailImg = document.createElement('img');
+      thumbailImg.className = 'pbw-chapter-thumbnail';
+
+      // Create a span element for the chapter title
+      const chapterText = document.createElement('span');
+      chapterText.className = 'pbw-chapter-title';
+
+      // Append the thumbnail and title elements to the component
+      currentChapterComponent.el().appendChild(thumbailImg);
+      currentChapterComponent.el().appendChild(chapterText);
+      currentChapterComponent.hide();
+
+      // Listen for the 'loadeddata' event on the player, this ensures that text tracks are available
+      player.on('loadeddata', () => {
+        // Get the text track with the ID 'srgssr-chapters'
+        const chapters = player.textTracks().getTrackById('srgssr-chapters');
+
+        // Add a listener for the 'cuechange' event on the chapters text track
+        chapters?.on('cuechange', () => {
+          // Check if there are active cues in the chapters text track
+          if (chapters.activeCues.length > 0) {
+            // Parse the JSON content of the active cue to get the current chapter information
+            const currentChapter = JSON.parse(chapters.activeCues[0].text);
+
+            // Update the displayed chapter title and thumbnail
+            chapterText.textContent = currentChapter.title;
+            chapterText.title = currentChapter.title;
+            thumbailImg.src = currentChapter.imageUrl;
+
+            // Show the current chapter component
+            currentChapterComponent.show();
+          } else {
+            // Hide the current chapter component if there are no active cues
+            currentChapterComponent.hide();
+          }
+        });
+      });
+    });
+  });
+
+  // Create a pillarbox player instance with the currentChapter plugin
+  const player = pillarbox(
+    'video-element-id',
+    { fill: true, plugins: { currentChapter: {} } }
+  );
+
+  // Set the video source for the player
+  player.src({ src: 'urn:rts:video:10894383', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/skip-credits.html b/static/showcases/skip-credits.html
new file mode 100644
index 0000000..fe125b1
--- /dev/null
+++ b/static/showcases/skip-credits.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Skip Credits</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./skip-showcase.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Skip Credits</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  // Register a plugin to skip credits
+  pillarbox.registerPlugin('skipButton', function() {
+    // Get a reference to the player instance
+    const player = this;
+
+    // Wait for the player to be ready
+    player.ready(() => {
+      // Create a button component for skipping content
+      const skipButtonComponent = player.addChild('button', {
+        // Define the click handler for the button
+        clickHandler: () => {
+          // Get the text track with the ID 'srgssr-intervals'
+          const timeIntervals = player.textTracks().getTrackById('srgssr-intervals');
+          // Get the active time interval cue
+          const timeInterval = timeIntervals.activeCues[0];
+
+          // Set the player's current time to the 'markOut' value of the time interval
+          player.currentTime(timeInterval.endTime);
+        },
+        // Set the class name for styling
+        className: 'pbw-skip-btn',
+        // Set the control text for accessibility
+        controlText: 'Skip'
+      });
+
+      // Hide the skip button initially
+      skipButtonComponent.hide();
+
+      // Listen for the 'loadeddata' event on the player
+      player.on('loadeddata', () => {
+        // Get the text track with the ID 'srgssr-intervals'
+        const timeIntervals = player.textTracks().getTrackById('srgssr-intervals');
+
+        // Add a listener for the 'cuechange' event on the time intervals text track
+        timeIntervals?.on('cuechange', () => {
+          // Check if there are active cues in the time intervals text track
+          if (timeIntervals.activeCues.length > 0) {
+            // Show the skip button if there are active cues
+            skipButtonComponent.show();
+          } else {
+            // Hide the skip button if there are no active cues
+            skipButtonComponent.hide();
+          }
+        });
+      });
+    });
+  });
+
+  // Create a pillarbox player instance with the skipButton plugin
+  const player = pillarbox(
+    'video-element-id',
+    { fill: true, plugins: { skipButton: {} } }
+  );
+
+  // Load the video source for the player
+  player.src({ src: 'urn:rts:video:14683290', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/skip-showcase.scss b/static/showcases/skip-showcase.scss
new file mode 100644
index 0000000..df526b8
--- /dev/null
+++ b/static/showcases/skip-showcase.scss
@@ -0,0 +1,18 @@
+.vjs-control.vjs-button.pbw-skip-btn {
+  position: absolute;
+  right: var(--size-5);
+  bottom: var(--size-9);
+  width: var(--size-10);
+  height: var(--size-6);
+  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-3);
+  cursor: pointer;
+  backdrop-filter: blur(5px);
+
+  .vjs-icon-placeholder::before {
+    font-size: var(--font-size-1);
+    content: 'Skip >>';
+  }
+}
diff --git a/static/showcases/static-showcase.scss b/static/showcases/static-showcase.scss
index 985568c..7f2783c 100644
--- a/static/showcases/static-showcase.scss
+++ b/static/showcases/static-showcase.scss
@@ -1,7 +1,7 @@
 @import '../../scss/index';
 
 body {
-  max-width: var(--size-sm);
+  max-width: var(--size-md);
 }
 
 .showcase-content {