Skip to content

uploadcare-video.adoc

Latest commit

 

History

History
143 lines (105 loc) · 4.1 KB

uploadcare-video.adoc

File metadata and controls

143 lines (105 loc) · 4.1 KB

Media Optimizer (Video)

The Media Optimizer’s Video feature plugin allows {productname} users to upload, process, and embed both images and videos directly within the editor.

Overview

The Media Optimizer’s Video feature plugin extends {productname} with powerful video handling features that allow users to upload, process, and embed videos directly within the editor. The plugin leverages Uploadcare’s infrastructure to provide video processing, custom video player functionality, and responsive video sizing.

Key benefits

  • Upload and optimize videos directly within the editor

  • Custom video player with configurable properties

  • Video poster image generation

  • Responsive video sizing

  • Support for MP4 and WebM formats

  • Drag-and-drop video upload

  • URL-based video insertion

  • Video controls customization

  • Accessibility features for videos

Interactive example

liveDemo::uploadcare-video[]

Basic setup

To add the Media Optimizer’s Video feature plugin to the editor, include uploadcare in the plugins option in the editor configuration.

Example
tinymce.init({
  selector: 'textarea',
  plugins: 'uploadcare',
  toolbar: 'uploadcare uploadcare-video',
  uploadcare_public_key: '<your-public-key>', // Required for Uploadcare integration
});
Note

The Media Optimizer’s Video feature plugin uses the same plugin code uploadcare as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded.

When bundling {productname} with webpack or similar tools, the uploadcare_resources option is required for video functionality to work properly, as it tells the plugin where to find the additional JavaScript resources needed for video playback.

Video Operations

Below is an overview of the features provided by the Video Optimizer plugin:

Feature Icon Description

Upload

folder.svg

Upload videos via drag-and-drop, file selection, or URL input

Upload from URL

link.svg

Upload videos from a URL

Below are the video player control options that are available to the video element:

Operation Description

Play

Customize video player controls and behavior

Mute

Mute the video

Unmute

Unmute the video

Slider

Shows the progress of the video and allows users to move the slider to seek to a specific time in the video

Resize

Changes the size of the video (when enabled)

Remaining Time

Shows the remaining time of the video

Picture-in-Picture

Enables picture-in-picture mode for the video

Settings

Opens the video settings menu

Fullscreen

Enables fullscreen mode for the video

UC Logo

Shows the Uploadcare logo

Options

The following configuration options affect the behavior of the Media Optimizer’s Video feature plugin:

Custom Video Element

The plugin creates a custom <uc-video> element that replaces the standard HTML <video> element when videos are processed through Uploadcare’s infrastructure.

Example: Custom video element created by the plugin on video insertion
<uc-video
  uuid="video-uuid-here"
  class="tox-uc-video"
  contenteditable="false"
  data-setup="{}"
  controls="true"
  autoplay="false"
  loop="false"
  muted="false"
  preload="metadata"
  width="640"
  height="360"
  poster="https://example.com/poster.jpg"
  showlogo="false"
</uc-video>