Skip to content

Commit

Permalink
fix-#211: support for chapters in video player
Browse files Browse the repository at this point in the history
  • Loading branch information
@Baroshem
Baroshem committed Jun 12, 2024
1 parent bf9f80f commit 801da99
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 27 deletions.
18 changes: 18 additions & 0 deletions docs/components/content/VideoPlayerWithChapters.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script setup lang="ts">
const chapters = {
0: 'Chapter 1',
6: 'Chapter 2',
9: 'Chapter 3',
}
</script>

<template>
<CldVideoPlayer
width="1620"
height="1080"
src="videos/dog-running-snow"
:config="{ url: { cname: 'test' } }"
chapters-button
:chapters="chapters"
/>
</template>
80 changes: 54 additions & 26 deletions docs/content/2.components/CldVideoPlayer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
<script setup lang="ts">
const chapters = {
0: "Chapter 1",
6: "Chapter 2",
9: "Chapter 3",
};
</script>

<template>
<CldVideoPlayer
width="600"
height="600"
src="<Cloudinary URL>"
:chapters="chapters"
chaptersButton
/>
</template>
```

: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

Expand Down
9 changes: 8 additions & 1 deletion playground/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ const mediaAssets = [
const buttonId = 'open-btn'
const cldVideoRef = ref()
const chapters = {
0: 'Chapter 1',
6: 'Chapter 2',
9: 'Chapter 3',
}
</script>

<template>
Expand All @@ -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"
/>
<CldUploadWidget
v-slot="{ open }"
Expand Down
8 changes: 8 additions & 0 deletions src/runtime/components/CldVideoPlayer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export interface CloudinaryVideoPlayerOptions {
hideContextMenu?: boolean
config?: ConfigOptions
pictureInPictureToggle?: boolean
chapters?: Record<string | number, string> | boolean
chaptersButton?: boolean
}
export interface CloudinaryVideoPlayerOptionsColors {
Expand Down Expand Up @@ -79,6 +81,8 @@ export type CldVideoPlayerProps = Pick<
width: string | number
config?: ConfigOptions
pictureInPictureToggle?: boolean
chapters?: Record<string | number, string> | boolean
chaptersButton?: boolean
}
const props = withDefaults(defineProps<CldVideoPlayerProps>(), {
Expand Down Expand Up @@ -116,6 +120,8 @@ const {
hideContextMenu,
config,
pictureInPictureToggle,
chapters,
chaptersButton,
} = props as CldVideoPlayerProps
const playerTransformations = Array.isArray(transformation)
Expand Down Expand Up @@ -210,6 +216,8 @@ const handleOnLoad = () => {
...logoOptions,
hideContextMenu,
pictureInPictureToggle,
chapters,
chaptersButton,
...useRuntimeConfig().public.cloudinary.cloud,
...useRuntimeConfig().public.cloudinary.url,
...config,
Expand Down

0 comments on commit 801da99

Please sign in to comment.