Back to Devexpress

Video Dialogs

aspnet-17756-components-html-editor-concepts-dialogs-video-dialogs.md

latest6.4 KB
Original Source

Video Dialogs

  • Jun 16, 2022
  • 2 minutes to read

Video dialogs include the Insert Video and Change Video dialogs that allow users to insert video content into the editor and change the content, respectively.

In the Design View, use the techniques below to invoke a dialog:

Dialog Structure

A video dialog contains the three tabs listed below.

Tab captionTab visibilityDescription
From your computerHtmlEditorInsertMediaDialogSettings.ShowFileUploadSectionAllows users to upload their local files.
From the galleryHtmlEditorFileManagerSettingsBase.EnabledAllows users to add video files from a predefined gallery to editor content. To customize the gallery settings, use the HtmlEditorInsertVideoDialogSettings.SettingsVideoSelector and HtmlEditorInsertVideoDialogSettings.SettingsVideoUpload properties.
From the web (URL)HtmlEditorInsertMediaDialogSettings.ShowInsertFromWebSectionAllows users to upload files from the web.

When the More options check box is selected, the dialog displays the settings section, which allows users to customize video element settings (size, position, description, and style settings such as margins, border, and CSS class). To hide the check box, set the HtmlEditorInsertMediaDialogSettingsBase.ShowMoreOptionsButton property to false.

Dialog Customization

At design time, you can use the ASPxHtmlEditor Designer to customize dialog settings. Programmatically, you can specify the HtmlEditorDefaultDialogSettings.InsertVideoDialog property for this purpose.

Online Demo

Insert Media Content

On the client side, the ASPxHtmlEditor API allows you to manage the opened dialog programmatically.

|

Dialog UI elements

|

Client method

| | --- | --- | |

Common Dialog UI elements

|

ASPxClientHtmlEditorMediaDialogBase.GetMoreOptionsCheckBox

ASPxClientHtmlEditorDialogBase.GetOkButton

ASPxClientHtmlEditorDialogBase.GetCancelButton

| |

“From the web (URL)” UI elements

|

ASPxClientHtmlEditorLinkDialog.GetUrlTextBox

| |

“Common Settings” Tab UI elements

|

ASPxClientHtmlEditorMediaDialogBase.GetWidthSpinEdit

ASPxClientHtmlEditorMediaDialogBase.GetHeightSpinEdit

ASPxClientHtmlEditorMediaDialogBase.GetPositionComboBox

ASPxClientHtmlEditorVideoDialog.GetPreloadModeComboBox

ASPxClientHtmlEditorVideoDialog.GetPosterTextBox

ASPxClientHtmlEditorVideoDialog.GetAutoPlayCheckBox

ASPxClientHtmlEditorVideoDialog.GetLoopCheckBox

ASPxClientHtmlEditorVideoDialog.GetShowPlayerControlsCheckBox

| |

“Style Settings” Tab UI elements

|

ASPxClientHtmlEditorEditElementDialog.GetTopMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetRightMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetBottomMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetLeftMarginTextBox

ASPxClientHtmlEditorEditElementDialog.GetBorderWidthSpinEdit

ASPxClientHtmlEditorEditElementDialog.GetBorderColorColorEdit

ASPxClientHtmlEditorEditElementDialog.GetBorderStyleComboBox

|