All Products
Search
Document Center

Import for editing

Last Updated: May 27, 2020

Overview

The editing module of the Alibaba Cloud short video SDK allows you to edit video effects. When you edit videos, you can use features such as filters, music, motion graphics, subtitling, music videos (MVs), sound effects, video effects, speed control, transition, and graffiti. You can quickly integrate the professional video editing feature into your application in a few simple steps. You can use a configuration file to customize the style of the video editing UI. You can also refer to the demo and use the Alibaba Cloud short video SDK to customize your own editing module.

Integrate the editing feature

Note: The editing feature is supported only in the standard and professional editions of the short video SDK, where the integration procedure is the same. You can apply for different licenses to use this feature in the standard and professional editions.

Create a sample project SVideoEditorDemo.

1

Step 1. Copy files

  • Copy the required library folder and Gradle-related folders into the sample project.

  • The following table describes folders to be copied.

Name Description Required
AliyunSVideoBase The basic package of the short video SDK. Yes
AliyunSvideoMusic The music widget of the short video SDK. Yes
AliyunEditor The code for configuring the editing UI and features. Yes
AliyunCrop The code for configuring the cropping UI. Yes
AlivcMedia The media library code. Yes
AliyunFileDownLoader The code related to resource download and databases. Yes
AliyunVideoCommon The public components, which include some utility classes. Yes
thirdparty-lib The dependent third-party libraries of the project. Yes
  • Copy the assets folder into your project.

  • The following table describes resources in the assets folder.

Note: The assets folder contains the basic resources required by video editing. Copy these ZIP files into the AliyunEditorDemo folder of your project.

Name Description Required
aliyun_svideo_animation_filter.zip The effect resources. Yes
aliyun_svideo_caption.zip The subtitle resources. No
aliyun_svideo_filter.zip The filter resources. Yes
aliyun_svideo_mv.zip The MV resources. No
aliyun_svideo_overlay.zip The motion graphics resources. No
tail.zip The tail watermark resources. No

Step 2. Reference the preceding folders and configure the build.gradle file

  • Add the following reference to the settings.gradle file of your project:
  1. include ':AliyunSVideoBase'// The basic package of the short video SDK.
  2. include ':AliyunSvideoMusic'// The music widget of the short video SDK.
  3. include ':AliyunEditor:editor_demo'// The code for configuring the editing UI and features.
  4. include ':AliyunCrop:crop'// The code for configuring the cropping UI.
  5. include ':AlivcMedia'// The media library code.
  6. include ':AliyunVideoCommon'//
  7. include ':AliyunFileDownLoader'// The code related to resource download and databases.
  • Add the native development kit (NDK) and dependency configuration to the build.gradle file of your project.
  1. defaultConfig {
  2. //...
  3. ndk {
  4. abiFilters "armeabi-v7a","arm64-v8a"
  5. // Currently, the short video SDK does not support the x86 architecture.
  6. }
  7. }
  8. dependencies {
  9. implementation fileTree(dir: 'libs', include: ['*.jar'])
  10. //...
  11. // The dependent libraries for the professional edition of the short video SDK.
  12. implementation project(':AliyunEditor')
  13. implementation project(':AliyunFileDownLoader')
  14. implementation project(':AliyunSVideoBase')
  15. }
  • Import the configuration in the thirdparty-lib/config.gradle directory into the build.gradle file of your project.
  1. buildscript {
  2. //...
  3. apply from: 'thirdparty-lib/config.gradle'
  4. dependencies {
  5. classpath '...'
  6. }
  7. }
  • Add the URL of a Maven repository to the build.gradle file of your project.
  1. allprojects {
  2. repositories {
  3. google()
  4. jcenter()
  5. maven { url "http://maven.aliyun.com/nexus/content/repositories/releases" }
  6. }
  7. }

Step 3. Add permissions

Add the following permissions to the AndroidManifest.xml file. Skip this step if permissions have been added.

  1. <uses-permission android:name="android.permission.INTERNET"/>
  2. <uses-permission android:name="android.permission.VIBRATE"/>
  3. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  4. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  5. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  6. <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
  7. <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
  8. <uses-permission android:name="android.permission.WAKE_LOCK"/>
  9. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
  10. <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
  11. <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
  12. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  13. <uses-permission android:name="android.permission.BLUETOOTH" />
  14. <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

Android 6.0 or later requires that your application request dangerous permissions at runtime.

Step 4. Call the onCreate method to initialize the Application class

  • Create a MyApplication class to inherit the android.app.Application class.
  1. @Override
  2. public void onCreate() {
  3. super.onCreate();
  4. QupaiHttpFinal.getInstance().initOkHttpFinal();
  5. DownloaderManager.getInstance().init(this);
  6. }
  • Specify the created Application class in the AndroidManifest.xml file.

2

  • If you have specified your own Application class for your project, you only need to add the onCreate method to the Application class.

Step 5: Set parameters for the editing feature

Note: The editing feature requires the storage permission. To use this feature properly on devices in Android 6.0 or later versions, your application must request the storage permission at runtime to avoid exceptions such as the black screen.

  • Use the default parameter settings to access the editing UI.
  1. AlivcEditInputParam param = new AlivcEditInputParam.Builder()
  2. .build();
  3. EditorMediaActivity.startImport(this, param);
  • Configure the UI.

    Specify the theme of the editing activity to configure the UI. The theme is optional. If you do not specify a theme, the default theme is used. The sample code is as follows:

<! —Configure the theme for the editing UI.—>

  1. <style name="AlivcEditUIStyle" parent="Theme.AppCompat.Light.NoActionBar">
  2. <! --The filter icon.-->
  3. <item name="filterImage">@mipmap/aliyun_svideo_filter</item>
  4. <! --The music icon.-->
  5. <item name="musicImage">@mipmap/aliyun_svideo_music</item>
  6. <! --The motion graphics icon.-->
  7. <item name="pasterImage">@mipmap/aliyun_svideo_overlay</item>
  8. <! --The subtitle icon.-->
  9. <item name="captionImage">@mipmap/aliyun_svideo_caption</item>
  10. <! --The MV icon.-->
  11. <item name="mvImage">@mipmap/aliyun_svideo_mv</item>
  12. <! --The effect icon.-->
  13. <item name="effectImage">@mipmap/alivc_svideo_effect</item>
  14. <! --The time effect icon.-->
  15. <item name="timeImage">@mipmap/aliyun_svideo_time</item>
  16. <! --The transition icon.-->
  17. <item name="translationImage">@mipmap/aliyun_svideo_transition</item>
  18. <! --The graffiti icon.-->
  19. <item name="paintImage">@mipmap/aliyun_svideo_paint</item>
  20. <! --The playback icon.-->
  21. <item name="playImage">@mipmap/aliyun_svideo_play</item>
  22. <! --The pause icon.-->
  23. <item name="pauseImage">@mipmap/aliyun_svideo_pause</item>
  24. <! --The icon that indicates the completion of editing.-->
  25. <item name="finishImage">@mipmap/aliyun_svideo_complete_red</item>
  26. </style>