1. Home
  2. AngularSDK~CloudinaryVideoComponent

new CloudinaryVideoComponent()

Description

The Cloudinary video component.

Properties
Name Type Description
transformation CloudinaryVideo

Generated by @cloudinary/url-gen
transformation VideoPoster

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.

vid = new CloudinaryVideo('dog', {cloudName: 'demo'});
			  sources = [
			 {
			        type: 'mp4',
			        codecs: ['vp8', 'vorbis'],
			        transcode: videoCodec(auto())
			},
			 {
			        type: 'webm',
			        codecs: ['avc1.4D401E', 'mp4a.40.2'],
			         transcode: videoCodec(auto())
			      }];
			
			<advanced-video [cldvid]="vid" [sources]="sources" controls></advanced-video>
Details
Component

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 40

Methods

ngOnInit()

Description

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

Details

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 60

ngOnChanges()

Description

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

Details

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 74

ngOnDestroy()

Description

On destroy, we cancel the currently running plugins.

Details

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 83

getVideoAttributes()

Description

Returns video attributes.

Details

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 90

attachRef()

Description

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

Details

angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts, line 119