Skip to main content

Video Plugin

If a Picture is Worth a Thousand Words, Then Is a Video Worth a Million?

Add A Video!

Usage#

/* Editor */
import { RicosEditor } from 'ricos-editor';
import { pluginVideo } from 'wix-rich-content-plugin-video';
<RicosEditor plugins={[pluginVideo(VideoConfig)]} />;
/* Viewer */
import { RicosViewer } from 'ricos-viewer';
import { pluginVideo } from 'wix-rich-content-plugin-video/viewer';
<RicosViewer plugins={[pluginVideo(VideoConfig)]} />;

Video Config API#

Viewer disableDownload (deprecated!)#

disableDownload should be set in the mediaSettings of the editor.#

disableDownload?: boolean;

Showcase of video without download

getVideoUrl#

This function take the pathname and form a full URL (invoked when rendering video which has relative URL).

getVideoUrl?: (src: { pathname: string }) => string;

onProgress#

Callback containing

  • played and loaded progress as a fraction.
  • playedSeconds and loadedSeconds in seconds.
  • id of video
onProgress?: () => ({ played: number, playedSeconds: number, loaded: number, loadedSeconds: number, id: string });

progressInterval#

The time between onProgress callbacks, in milliseconds (default 1000)

progressInterval?: number;

toolbar#

The toolbar setting refers to the plugin functionality toolbar, it is an object which may consist of the following keys:

toolbar?: {
hidden?: [keynames: string];
icons?: { keynames: string };
}

hidden - An array of toolbar button keynames to be removed from toolbar

icons - An object of toolbar button keynames to custom icons map (e.g { replace: MyCustomReplaceIcon }, { InsertPluginButtonIcon: MyCustomInsertIcon } etc...)

enableCustomUploadOnMobile#

Apply the extended input modal styles in mobile (if handleFileSelection is available)

enableCustomUploadOnMobile?: boolean;

handleFileSelection#

Here you can call your custom video upload functionality

handleFileSelection?: (updateEntity: ({ data: dataType }) => void) => void;
dataType =
{
pathname: string,
thumbnail: {
pathname: string,
height: number,
width: number,
},
};

handleFileUpload#

Use for native file upload

handleFileUpload?: (file: File, updateEntity: ({ data: dataType }) => void) => void;
dataType =
{
pathname: string,
thumbnail: {
pathname: string,
height: number,
width: number,
},
};

Sound Cloud Plugin#

SoundCloud toolbar button is part of the Video plugin. To use it we need to expose a button with exposeButtons:

see documentation above.

Add A SoundCloud!

/* Editor */
import { RicosEditor } from 'ricos-editor';
import { pluginVideo, videoButtonsTypes } from 'wix-rich-content-plugin-video';
<RicosEditor plugins={[pluginVideo({ exposeButtons: [videoButtonsTypes.soundCloud] })]} />;
/* Viewer */
import { RicosViewer } from 'ricos-viewer';
import { pluginVideo } from 'wix-rich-content-plugin-video/viewer';
<RicosViewer plugins={[pluginVideo(VideoConfig)]} />;

exposeButtons#

The buttons exposed by the plugin

exposeButtons?: array;

Example value:

[videoButtonsTypes.video, videoButtonsTypes.soundCloud];

YouTube Plugin#

YouTube toolbar button is part of the Video plugin. To use it we need to expose a button with exposeButtons:

see documentation above.

Add A YouTube!

/* Editor */
import { RicosEditor } from 'ricos-editor';
import { pluginVideo, videoButtonsTypes } from 'wix-rich-content-plugin-video';
<RicosEditor plugins={[pluginVideo({ exposeButtons: [videoButtonsTypes.youTube] })]} />;
/* Viewer */
import { RicosViewer } from 'ricos-viewer';
import { pluginVideo } from 'wix-rich-content-plugin-video/viewer';
<RicosViewer plugins={[pluginVideo(VideoConfig)]} />;

exposeButtons#

The buttons exposed by the plugin

exposeButtons?: array;

Example value:

[videoButtonsTypes.youTube, videoButtonsTypes.video, videoButtonsTypes.soundCloud];
Edit this page