All Products
Search
Document Center

Editing

Last Updated: Jul 30, 2019

The short video SDK allows you to import videos or images and produce videos with rich effects such as filters, dubbing, time effects, and transitions. The core editing interface is AliyunIEditor.

Edition difference

Edition Description
Professional edition All features are supported.
Standard edition Features except subtitle, animated sticker, and MV are supported.
Basic edition The import and editing features are not supported.

Editing process

The editing process is as follows:

1. Set parameters.
2. Import videos and images.
3. Start editing.
4. Configure effects.
5. Control preview.
6. Produce the video.

Set parameters

Initialization

You can create and initialize an editor instance.

  • Create an editor instance.
  1. AliyunEditorFactory#creatAliyunEditor(Uri uri)
  • Initialize an editor instance.
  1. AliyunIEditor#init(SurfaceView surfaceView);// Sets the preview window.

Import videos and images

You can import videos and images as media clips and assemble the media clips before editing to obtain the URI that is required for initialization.

  • Add a media clip.
  1. AliyunIImport#addMediaClip(AliyunClip clip);
  • Remove a media clip.
  1. AliyunIImport#removeMedia(int id);
  • Swap the positions of media clips.
  1. AliyunIImport#swap(int pos1, int pos2);
  • Generate the media clip configuration file.
  1. AliyunIImport#generateProjectConfigure();
  • Set production parameters, including the frame rate, bitrate, GOP size, output resolution, encoder, quality level, and video display mode.
  1. AliyunIImport#setVideoParam(AliyunVideoParam param);

Start editing

Dynamically update media clips

During editing, you can dynamically crop and replace the media clips and adjust the transition duration and effects.

  • Obtain the media clip manager.
  1. AliyunIEditor#getSourcePartManager();// Obtains the media clip manager.
  • Add a media clip to the end of the media clip list.
  1. AliyunIClipConstructor#addMediaClip(AliyunClip clip);
  • Add a media clip to the specified position.
  1. AliyunIClipConstructor#addMediaClip(int index, AliyunClip clip);
  • Update and replace the media clip at the specified position.
  1. AliyunIClipConstructor#updateMediaClip(int index, AliyunClip clip);
  • Delete the last media clip.
  1. AliyunIClipConstructor#deleteMediaClip();
  • Delete the specified media clip.
  1. AliyunIClipConstructor#deleteMediaClip(int index);
  • Apply the updated media clip list and clear the old one.
  1. AliyunIClipConstructor#updateAllClips(List<AliyunClip> clips);
  • Obtain the number of current media clips.
  1. AliyunIClipConstructor#getMediaPartCount();
  • Obtain the current media clip list.
  1. AliyunIClipConstructor#getAllClips();
  • Swap the positions of media clips.
  1. AliyunIClipConstructor#swap(int pos1, int pos2);
  • Apply the updated media clips.
  1. AliyunIEditor#applySourceChange();// Applies the updated media clips.

Configure effects

Common filter

You can configure common filter effects.

  • Add a common filter.
  1. AliyunIEditor#applyFilter(EffectBean effect);
  • Remove a common filter.
  1. AliyunIEditor#applyFilter(new EffectBean());// Removes a common filter by setting its path to null.

Animated filter

You can configure animated filter effects, for example, spirit freed from the body.

  • Add an animated filter.
  1. AliyunIEditor#addAnimationFilter(EffectFilter filter);
  • Remove an animated filter.
  1. AliyunIEditor#removeAnimationFilter(EffectFilter filter);
  • Clear all animated filters.
  1. AliyunIEditor#clearAllAnimationFilter();

Animated sticker, bubble, and text

You can configure animated sticker effects.

  • By using the UI controller

In the short video SDK, the UI controller is an animated sticker control framework that encapsulates common interaction logic (scaling, rotating, and mirroring) of animated stickers on short videos. The core interfaces include AliyunIEditor, AliyunPasterManager, AliyunPasterController, and AliyunPasterBaseView. Animated sticker interactions within the UI controller comply with the interaction rules shown in the demo.

AliyunIEditor: the core editing interface. AliyunPasterManager: the sticker and subtitle manager in the UI controller, which is used to add stickers. AliyunPasterController: the controller for managing a single sticker, which is used to display, hide, or remove a sticker. You can also use this interface to obtain attributes of a sticker, such as the display duration. AliyunPasterBaseView: the interface abstraction of the sticker display view in the UI controller. To customize the sticker display UI without changing the interaction logic, you can implement only this interface.

  • Obtain the animated sticker manager (AliyunPasterManager).
  1. AliyunIEditor#createPasterManager();
  • Set the size of the animated sticker display area. (This method must be called before AliyunIEditor#init.)
  1. AliyunPasterManager#setDisplaySize(int width, int height);
  • Add a common animated sticker or a bubble animated sticker. The sticker controller (AliyunPasterController) is returned.
  1. AliyunPasterManager#addPaster(String path); // Adds an animated sticker that is displayed all the time.
  2. AliyunPasterManager#addPasterWithStartTime(String path, long startTime, long duration); // Adds an animated sticker that is displayed within the specified time period.
  • Add text.
  1. AliyunPasterManager#addSubtitle(String text, String font); // Adds text that is displayed all the time.
  2. AliyunPasterManager#addSubtitleWithStartTime(String text, String font, long startTime, long duration); // Adds text that is displayed within the specified time period.
  • Set the UI view (AliyunPasterBaseView) that displays animated stickers, bubbles, and text. This method must be called.
  1. AliyunPasterController#setPasterView(AliyunPasterBaseView pasterView);
  • Set the callback to be called when an animated sticker is restored.
  1. AliyunPasterManager#setOnPasterRestoreListener(OnPasterRestored listener);
  • Remove an animated sticker from the UI controller.
  1. AliyunPasterController#removePaster();
  • Display an animated sticker. (The animated sticker is rendered on the video and disappears from the UI layer.)
  1. AliyunPasterController#editCompleted();
  • Hide an animated sticker. (The animated sticker is removed from the video and displayed at the UI layer.)
  1. AliyunPasterController#editStart();
  • Create a preview player at the sticker view layer.
  1. AliyunPasterController#createPasterPlayer(TextureView view);
  • Remove an animated sticker.
  1. AliyunPasterController#removePaster();
  • Without using the UI controller

If you do not want to use the UI controller, you need to independently develop the logic for editing and interacting with animated stickers on the UI. This is complex and not recommended. To render an animated sticker, you need to pass only the object, position, and size of the animated sticker to the renderer.

You can directly use the sticker rendering interfaces provided by the short video SDK to render stickers without using the UI controller. In fact, the UI controller uses exactly the same interfaces to render stickers. The core interfaces involved are AliyunIEditor, AliyunPasterManager, and AliyunPasterRender.

AliyunIEditor: the core editing interface. AliyunPasterManager: the sticker and subtitle manager in the UI controller, which is used to add stickers. AliyunPasterRender: the core sticker rendering interface. This interface only renders stickers on videos. You need to implement the upper-layer UI interaction logic and calculate information such as the position, size, and rotation angle.

  • Obtain the animated sticker manager (AliyunPasterManager).
  1. AliyunIEditor#createPasterManager();
  • Obtain the sticker renderer (AliyunPasterRender).
  1. AliyunIEditor#getPasterRender();
  • Set the size of the animated sticker display area. (These methods must be called before AliyunIEditor#init.)
  1. AliyunPasterRender#setDisplaySize(int width, int height);
  2. AliyunPasterManager#setDisplaySize(int width, int height);
  • Add an animated sticker.
  1. AliyunPasterRender#addEffectPaster(EffectPaster paster);
  • Display an animated sticker.
  1. AliyunPasterRender#showPaster(EffectPaster paster);
  • Hide an animated sticker.
  1. AliyunPasterRender#hidePaster(EffectPaster paster);
  • Remove an animated sticker.
  1. AliyunPasterRender#removePaster(EffectPaster paster);
  • Set the callback to be called when an animated sticker is saved and restored.
  1. AliyunPasterRender#setOnPasterResumeAndSave(OnPasterResumeAndSave listener);

Static sticker

  • Add a static sticker.
  1. AliyunIEditor#addImage(EffectPicture picture);
  • Remove a static sticker.
  1. AliyunIEditor#removeImage(EffectPicture picture);

Watermark

  1. AliyunIEditor#applyWaterMark(String imgPath, float sizeX, float sizeY, float posX, float posY);

End watermark

  1. AliyunIEditor#addTailWaterMark(String imagePath, float sizeX, float sizeY, float posX, float posY, long durationUs);

Transition

  • Add a transition. You can set a transition when importing or adding a video or an image.
  1. AliyunVideoClip#setTransition(TransitionBase transition) // Sets a transition for a video.
  2. AliyunImageClip#setTransition(TransitionBase transition) // Sets a transition for an image.
  • Update transition configuration. You can modify and update transition configuration when updating media clips.
  1. AliyunEditor#setTransition(int index, TransitionBase transition) // Sets a transition. The index parameter indicates the transition position, starting from 0.
  2. AliyunEditor#setTransition(Map<Integer, TransitionBase> transitions) // Sets multiple transitions.

Frame animation

You can add frame animation effects for non-stream resources.

  • Add a frame animation.
  1. AliyunEditor#addFrameAnimation(ActionBase action)
  • Remove a frame animation.
  1. removeFrameAnimation(ActionBase action)

MV

  • Add an MV.
  1. AliyunIEditor#applyMV(EffectBean effect);
  • Remove an MV.
  1. AliyunIEditor#applyMV(null); // Removes the MV effect by setting the parameter to null.

Background music and multi-track dubbing

  • Add background music or dubbing. The background music is not affected by time effects, while the dubbing is.
  1. AliyunIEditor#applyMusic(EffectBean effect); // Adds background music.
  2. AliyunIEditor#applyDub(EffectBean effect); // Adds dubbing.
  • Remove background music or dubbing.
  1. AliyunIEditor#removeMusic(EffectBean effect); // Removes background music.
  2. AliyunIEditor#removeDub(EffectBean effect); // Removes dubbing.
  • Adjust the weight of the background music or dubbing when it is mixed with the original audio.
  1. AliyunIEditor#applyMusicMixWeight(int id, int weight);
  • Adjust the volume of the specified audio stream (background music, dubbing, or original audio).
  1. AliyunIEditor#applyMusicWeight(int id, int weight);
  • Denoise an audio stream. (Perform this operation with caution because it consumes many resources.)
  1. AliyunIEditor#denoise(int id, boolean needDenoise)

Time effect (speed adjustment, repetition, or reverse playback)

  • Add the speed adjustment effect.
  1. AliyunIEditor#rate(float rate, long startTime, long duration, boolean needOriginDuration);
  2. // Since V3.7.0, you can call this method to adjust the playback speed for multiple videos or images.
  • Add the repetition effect.
  1. AliyunIEditor#repeat(int times, long startTime, long duration, boolean needOriginDuration);
  • Add the reverse playback effect.
  1. AliyunIEditor#invert();
  2. Note: Videos whose GOP size is greater than 5 must be transcoded before reverse playback. You can call NativeParser#getMaxGopSize() to view the video GOP size. During transcoding, set the GOP size to 1 by calling CropParam#setGop(1);
  • Remove the time effect.
  1. AliyunIEditor#deleteTimeEffect(int id)

Doodle

The short video SDK encapsulates a set of doodle methods, including those for configuring the canvas and paint brush. All doodling operations are completed through the doodle controller (AliyunICanvasController). Canvas: a UI interaction view for doodling. You can add it to the UI interaction view group. Paint brush: an android.graphics.Paint object. You can set an external paint brush or use the default one.

  • Obtain the doodle controller (AliyunICanvasController).
  1. AliyunIEditor#obtainCanvasController(Context context, int w, int h);
  • Obtain the canvas.
  1. AliyunICanvasController#getCanvas();
  • Check whether there is a doodle.
  1. AliyunICanvasController#hasCanvasPath();
  • Render the doodle on the video.
  1. AliyunICanvasController#applyPaintCanvas();
  • Remove the doodle rendered on the video.
  1. AliyunICanvasController#removeCanvas();
  • Undo the previous doodling operation.
  1. AliyunICanvasController#undo();
  • Clear the canvas.
  1. AliyunICanvasController#clear();
  • Set a color for the current paint brush.
  1. AliyunICanvasController#setCurrentColor(int color);
  • Set a line width for the current paint brush.
  1. AliyunICanvasController#setCurrentSize(float size);
  • Set a custom paint brush.
  1. AliyunICanvasController#setPaint(Paint paint);
  • Reset the canvas.
  1. AliyunICanvasController#resetPaintCanvas();
  • Undo all doodling operations.
  1. AliyunICanvasController#cancel();
  • Confirm all doodling operations.
  1. AliyunICanvasController#confirm();
  • Release resources.
  1. AliyunICanvasController#release();

Others

  • Set the dynamic display mode.
  1. AliyunIEditor#addRunningDisplayMode(VideoDisplayMode mode, int streamId, long startTimeMills, long durationMills)
  • Set a blur background. (The effect is visible in padding mode.)
  1. AliyunIEditor#applyBlurBackground(int streamId, long startTimeMills, long durationMills, float blurRadius)

Control preview

You can configure the preview in the editor.

  • Replace the display window.
  1. AliyunIEditor#setDisplayView(SurfaceView surfaceView);
  2. AliyunIEditor#setDisplayView(TextureView textureView); // This method is not recommended unless for special requirements.
  • Start the playback.
  1. AliyunIEditor#play();
  • Seek to a time point.
  1. AliyunIEditor#seek();
  • Pause the playback.
  1. AliyunIEditor#pause();
  • Resume the playback.
  1. AliyunIEditor#resume();
  • Stop the playback.
  1. AliyunIEditor#stop();
  • Obtain the current position in the stream, which is not affected by the time effect.
  1. AliyunIEditor#getCurrentStreamPosition();
  • Obtain the current playback position, which is affected by the time effect.
  1. AliyunIEditor#getCurrentPlayPosition();
  • Obtain the stream duration, which is not affected by the time effect.
  1. AliyunIEditor#getStreamDuration();
  • Obtain the total playback duration, which is affected by the time effect.
  1. AliyunIEditor#getDuration();
  • Set whether to mute the audio.
  1. AliyunIEditor#setAudioSilence(boolean silence);
  • Set the volume.
  1. AliyunIEditor#setVolume(int volume);
  • Set the video display mode.
  1. AliyunIEditor#setDisplayMode(VideoDisplayMode mode);
  • Set the background filling color in padding mode.
  1. AliyunIEditor#setFillBackgroundColor(int color);

Produce the video

  • Start the production.
  1. AliyunIEditor#compose(AliyunVideoParam param, String outputPath, AliyunIComposeCallBack callback);
  • Cancel the production.
  1. AliyunIEditor#cancelCompose();