1. Home
  2. ReactSDK~AdvancedVideo

new AdvancedVideo()

Description

The Cloudinary video component.

Properties
Name Type Description
transformation CloudinaryVideo

Generated by @cloudinary/url-gen
plugins Plugins

Advanced image component plugins lazyload()
videoAttributes

Optional attributes include controls, loop, muted, poster, preload, autoplay
videoEvents

Optional video events include play, loadstart, playing, error, ended
sources VideoSources

Optional sources to generate
Examples

Using custom defined resources.

const vid = new CloudinaryVideo('dog', {cloudName: 'demo'});
			const videoEl = useRef();
			const sources = [
			 {
			   type: 'mp4',
			   codecs: ['vp8', 'vorbis'],
			   transcode: videoCodec(auto())
			 },
			 {
			   type: 'webm',
			   codecs: ['avc1.4D401E', 'mp4a.40.2'],
			   videoCodec: videoCodec(auto())
			 }];
			
			return <AdvancedVideo cldVid={vid} sources={sources} ref={videoEl} controls />
Details
Component

react/src/AdvancedVideo.tsx, line 35

Methods

componentDidMount()

Description

On mount, creates a new HTMLVideoLayer instance and initializes with ref to video element, user generated cloudinaryVideo and the plugins to be used.

Details

react/src/AdvancedVideo.tsx, line 44

componentDidUpdate()

Description

On update, we cancel running plugins and update the video instance if the src was changed.

Details

react/src/AdvancedVideo.tsx, line 51

componentWillUnmount()

Description

On unmount, we cancel the currently running plugins.

Details

react/src/AdvancedVideo.tsx, line 59

getVideoAttributes()

Description

Returns video attributes.

Details

react/src/AdvancedVideo.tsx, line 66

attachRef( element )

Description

Attach both this.videoRef and props.innerRef as ref to the given element.

Parameters
Name Type Description
element

the element to attach a ref to
Details

react/src/AdvancedVideo.tsx, line 79