diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md index 49e69a6..39aa638 100644 --- a/docs/content/2.components/CldVideoPlayer.md +++ b/docs/content/2.components/CldVideoPlayer.md @@ -111,7 +111,8 @@ Adding a button to select chapters (you can pass `chapters` prop as a boolean if | 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?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) | `"on-scroll"` | +| autoPlay | boolean | `false` | Make the video automatically play | `true` | +| autoplayMode | string | `"always"` | When, if, should the video automatically play. See `autoplayMode` in [Video Player docs](https://cloudinary.com/documentation/video_player_api_reference#constructor_parameters?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary) | `"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` | @@ -127,6 +128,7 @@ Adding a button to select chapters (you can pass `chapters` prop as a boolean if | 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 | +| playsinline | boolean | `false` | Can be used with autoplay and muted to enable autoplay on iOS devices | `true` | 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"` | diff --git a/playground/app.vue b/playground/app.vue index 0343b1e..f425c83 100644 --- a/playground/app.vue +++ b/playground/app.vue @@ -51,6 +51,11 @@ const colors = { /> & { - autoPlay?: string + autoPlay?: boolean + autoplayMode?: 'never' | 'always' | 'on-scroll' + playsinline?: boolean className?: string height: string | number id?: string @@ -92,7 +96,9 @@ export type CldVideoPlayerProps = Pick< } const props = withDefaults(defineProps(), { - autoPlay: 'never', + autoPlay: false, + autoplayMode: 'always', + playsinline: false, controls: true, logo: true, loop: false,