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

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.


componentDidUpdate()

Description

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


componentWillUnmount()

Description

On unmount, we cancel the currently running plugins.


getVideoAttributes()

Description

Returns video attributes.


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