diff --git a/docs/components/content/VideoPlayerWithChapters.vue b/docs/components/content/VideoPlayerWithChapters.vue
new file mode 100644
index 0000000..2a79066
--- /dev/null
+++ b/docs/components/content/VideoPlayerWithChapters.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md
index 588e86b..be04f99 100644
--- a/docs/content/2.components/CldVideoPlayer.md
+++ b/docs/content/2.components/CldVideoPlayer.md
@@ -77,34 +77,62 @@ Picture-in-picture helps your viewers continue their multitasking agenda and mai
:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" pictureInPictureToggle}
+## Chapters
+
+Adding a button to select chapters (you can pass `chapters` prop as a boolean if the video already has chapters as explained [here](https://cloudinary.com/documentation/video_player_customization#video_chapters)).
+
+```html
+
+
+
+
+
+```
+
+:video-player-with-chapters
+
## General Props
-| Prop Name | Type | Default | Description | Example |
-| ---------------------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` |
-| className | string | - | Additional class names added to the video container | `"my-video-player"` |
-| colors | object | See below | Player chrome colors | See Colors Below |
-| controls | boolean | `true` | Show player controls | `true` |
-| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` |
-| height | string/number | - | **Required**: Player height | `1080` |
-| id | string | - | Video instance ID, defaults to src value | `"my-video"` |
-| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below |
-| loop | boolean | `false` | Loop the video | `true` |
-| muted | boolean | `false` | Load muted by default | `true` |
-| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below |
-| onError | Function | - | Triggered on video error | See Events Below |
-| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below |
-| onPause | Function | - | Triggered on video pause | See Events Below |
-| onPlay | Function | - | Triggered on video play | See Events Below |
-| onEnded | Function | - | Triggered when video has ended play | See Events Below |
-| playerRef | Ref | - | React ref to access Player instance | See Refs Below |
-| showLogo | boolean | `true` | Show the Cloudinary logo on Player | `false` |
-| src | string | - | **Required**: Video public ID | `"videos/my-video"` |
-| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` |
-| version | string | `"1.10.6"` | Cloudinary Video Player version | `"1.9.4"` |
-| videoRef | Ref | - | React ref to access video element | See Refs Below |
-| width | string/number | - | **Required**: Player width | `1920` |
-| pictureInPictureToogle | boolean | - | Enable Picture in Picture mode | true |
+| Prop Name | Type | Default | Description | Example |
+| ---------------------- | -------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
+| autoPlay | string | `"never"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters) | `"on-scroll"` |
+| className | string | - | Additional class names added to the video container | `"my-video-player"` |
+| colors | object | See below | Player chrome colors | See Colors Below |
+| controls | boolean | `true` | Show player controls | `true` |
+| fontFace | string | - | Player UI font. Uses Google Fonts. | `"Source Serif Pro"` |
+| height | string/number | - | **Required**: Player height | `1080` |
+| id | string | - | Video instance ID, defaults to src value | `"my-video"` |
+| logo | boolean/object | See Below | Logo to display in Player UI | See Logo Below |
+| loop | boolean | `false` | Loop the video | `true` |
+| muted | boolean | `false` | Load muted by default | `true` |
+| onDataLoad | Function | - | Triggered when video metadata is loaded | See Events Below |
+| onError | Function | - | Triggered on video error | See Events Below |
+| onMetadataLoad | Function | - | Triggered when video data is loaded | See Events Below |
+| onPause | Function | - | Triggered on video pause | See Events Below |
+| onPlay | Function | - | Triggered on video play | See Events Below |
+| onEnded | Function | - | Triggered when video has ended play | See Events Below |
+| playerRef | Ref | - | React ref to access Player instance | See Refs Below |
+| showLogo | boolean | `true` | Show the Cloudinary logo on Player | `false` |
+| src | string | - | **Required**: Video public ID | `"videos/my-video"` |
+| transformation | object/array | - | Transformations to apply to the video | `{ width: 200, height: 200, crop: 'fill' }` |
+| version | string | `"1.10.6"` | Cloudinary Video Player version | `"1.9.4"` |
+| videoRef | Ref | - | React ref to access video element | See Refs Below |
+| width | string/number | - | **Required**: Player width | `1920` |
+| pictureInPictureToogle | boolean | - | Enable Picture in Picture mode | true |
+| chaptersButton | boolean | - | Enable Chapters button | true |
+| chapters | object/boolean | - | Chapters configuration | { 0: 'Chapter 1', 6: 'Chapter 2', 9: 'Chapter 3' } |
## Colors Prop
diff --git a/playground/app.vue b/playground/app.vue
index 56221bf..8a1fd10 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -17,6 +17,12 @@ const mediaAssets = [
const buttonId = 'open-btn'
const cldVideoRef = ref()
+
+const chapters = {
+ 0: 'Chapter 1',
+ 6: 'Chapter 2',
+ 9: 'Chapter 3',
+}
@@ -42,9 +48,10 @@ const cldVideoRef = ref()
width="1620"
height="1080"
src="videos/dog-running-snow"
- chapters
:config="{ url: { cname: 'test' } }"
picture-in-picture-toggle
+ chapters-button
+ :chapters="chapters"
/>
| boolean
+ chaptersButton?: boolean
}
export interface CloudinaryVideoPlayerOptionsColors {
@@ -79,6 +81,8 @@ export type CldVideoPlayerProps = Pick<
width: string | number
config?: ConfigOptions
pictureInPictureToggle?: boolean
+ chapters?: Record | boolean
+ chaptersButton?: boolean
}
const props = withDefaults(defineProps(), {
@@ -116,6 +120,8 @@ const {
hideContextMenu,
config,
pictureInPictureToggle,
+ chapters,
+ chaptersButton,
} = props as CldVideoPlayerProps
const playerTransformations = Array.isArray(transformation)
@@ -210,6 +216,8 @@ const handleOnLoad = () => {
...logoOptions,
hideContextMenu,
pictureInPictureToggle,
+ chapters,
+ chaptersButton,
...useRuntimeConfig().public.cloudinary.cloud,
...useRuntimeConfig().public.cloudinary.url,
...config,