React

Properties

CookiePlaceHolder

Prop	Type	Description	Optional	From AEM Video Model
cookiePlaceHolderButtonLabel	string	The label button that allows users to accept cookies and load the video.	✅	✅
enableCookiePlaceHolder	boolean	Determines whether the cookie overlay should be shown	✅	✅
cookiePlaceHolderTitle	string	The cookie title displayed on the overlay	✅	✅
cookiePlaceHolderDescription	boolean	The description explaining why consent is required before loading the video.	✅	✅

ExternalVideo

Prop	Type	Description	Optional	From AEM Video Model
youtubeId	string	The YouTube video ID used to build the youtube URL.	✅	✅
youtubeAutoplay	boolean	Enables autoplay for YouTube.	✅	✅
vimeoId	string	The Vimeo video ID used to build the vimeo URL.	✅	✅
vimeoAutoplay	boolean	Enables autoplay for Vimeo.	✅	✅
startTime	number	The timestamp where the video should start.	✅	✅
cookieYoutube	CookiePlaceHolder	Cookie placeholder configuration for YouTube.	✅	✅
cookieVimeo	CookiePlaceHolder	Cookie placeholder configuration for Vimeo.	✅	✅

VideoData

Prop	Type	Description	Optional	From AEM Video Model
type	VideoType	Defines the video source type, e.g. DAM Video, Vimeo Video, Youtube Video	❌	✅
overlayTitle	boolean	Indicates whether the video title should be displayed in the overlay.	✅	✅
externalVideo	ExternalVideo	The external video configuration object.	✅	✅
dynamicAssetFallBack	thumbnail	Thumbnail metadata exported from the backend, used on top of the video	✅	✅
dynamicAssetSource	damVideo	The DAM video object containing the primary video source.	✅	✅

Examples

Vimeo Video

import { Asset } from '@tmedxp/aem-react-components';

const VimeoVideo = () => (
  <Video
    video={{
      type: 'Vimeo Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: '838825000',
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: 'Click here to accept cookie',
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: 'Click here to accept cookie',
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'None',
        altText: 'alt',
        autoplay: false,
        loop: true,
        trackSrc: '',
        assetMetadata: {
          assetState: null,
          type: null,
          path: null,
          domain: null,
          folder: null,
          title: null,
          fileStatus: null,
          status: null,
          altText: null,
          altLanguages: null,
          publishTimeStamp: null,
          scene7FileAvs: null,
          fileReference: '',
          name: '',
        },
        decorative: false,
      },
    }}
  />
);

export { VimeoVideo };

Dam Video

import { Asset } from '@tmedxp/aem-react-components';

const DamVideo = () => (
  <Video
    video={{
      type: 'DAM Video',
      overlayTitle: 'Title',
      externalVideo: {
        youtubeId: null,
        youtubeAutoplay: false,
        vimeoId: null,
        vimeoAutoplay: false,
        cookieVimeo: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        cookieYoutube: {
          enableCookiePlaceHolder: false,
          cookiePlaceHolderTitle: null,
          cookiePlaceHolderDescription: null,
          cookiePlaceHolderButtonLabel: null,
        },
        startTime: 0,
      },
      thumbnail: {
        assetState: 'processed',
        type: 'Image',
        path: 'toyotaeuropetest/Hero-Image-2-3',
        domain: 'https://scene7.toyota.eu/',
        folder: 'toyotaeuropetest/qa-foundation/dam-asset-metadata/',
        title: 'Hero-Image-2-3',
        fileStatus: 'PublishComplete',
        status: 'Finished',
        altText: 'Alt',
        altLanguages: [],
        publishTimeStamp: 1_765_969_735_882,
        scene7FileAvs: '',
        fileReference:
          '/content/dam/qa-foundation/dam-asset-metadata/Hero-Image-2.png',
      },
      damVideo: {
        dynamicEncodes: 'Encodes',
        altText: 'Alt',
        autoplay: true,
        loop: true,
        trackSrc: '/content/dam/subtitles/sample_sv.vtt',
        assetMetadata: {
          assetState: 'processed',
          type: 'Video',
          path: 'toyotaeuropetest/test-1-1',
          domain: 'https://scene7.toyota.eu/',
          folder: 'toyotaeuropetest/video-test/',
          title: 'test-1-1',
          fileStatus: 'PublishComplete',
          status: 'Finished',
          altText: '',
          altLanguages: [],
          publishTimeStamp: 1_765_969_735_882,
          scene7FileAvs: 'toyotaeuropetest/test-1-1-AVS',
          fileReference: '/content/dam/video-test/test-1.mp4',
        },
        decorative: false,
      },
    }}
  />
);

export { DamVideo };