Put Image above Video and save video in android

Question

I'm writing application which must put image above the video and save video.

In general application opens video file, after that user select image with transparent background and put that image above the video, after user press save button he get new video but already with image above the video.

Can you please provide me information or hints how to do that.

Do you have existing code already? We won't do the code for you, but we can help fix it. Basically, you put an ImageView (or a TextView, works too) with a transparent background over your VideoView. — Wildcopper, Apr 29 '15 at 15:01
@Wildcopper unfortunately I have no source code, as I never deal with video processing applications, the main thing that I must do is to put image above video and save it. — Viktor Apoyan, Apr 30 '15 at 06:17

King of Masses · Accepted Answer · 2015-04-30T07:01:21.870

9

So as per your question, your looking for a video editor kind of solution to achieve the task..

I think this your scenario:

** You have a video in your application

** Open a bitmap resource (image file from some where)

** Overlay this bitmap at the bottom of the movie (video) on all frames in the background

** Save the video on external storage

For this ffmpeg does support overlaying functionality or Android MediaCodec stuff. FFMPEG has various filters one of them is overlay filter. What I understand is you want to overlay an image (i.e. png) on the video, ffmpeg surely is a useful framework to do this job. You can set the output format you can set the co-ordinates of the image which is to be overplayed.

E.g:

ffmpeg -i input.avi -i logo.png -filter_complex 'overlay=10:main_h-overlay_h-10' output.avi

Above command adds overlays logo.png on the input.avi video file in bottom left corner.

More information about the filters is available at following website,

https://www.ffmpeg.org/ffmpeg-filters.html#overlay-1

Here is the GitHub links

FFmpeg Android Java

Android Java wrapper around ffmpeg command line binary or this

If this is a solution to your problem you need the C code equivalent to the above command. You also need to see the performance of the ffmpeg because it a pure software framework.

Hope I have understood your question correctly and this helps.

edited Apr 30 '15 at 07:01

answered Apr 29 '15 at 15:38

King of Masses

18,405
4
60
77

Thanks for answer, but I think I describe problem in a wrong way, can you please check my updated question? I need to put image above video and save video. – Viktor Apoyan Apr 30 '15 at 06:16
i updated my answer you can check @ViTo Brothers – King of Masses Apr 30 '15 at 06:51
can I use this approach in Android application? – Viktor Apoyan Apr 30 '15 at 06:55
you can use this in Android.. I updated my answer with GitHub example source link.. Check it as well – King of Masses Apr 30 '15 at 06:59
@KingofMasses, can you please tell me what will be the command for image to be at center-top of the video? – BST Kaal Nov 19 '15 at 18:43
@BSTKaal use relative layout and put your video view fill parent for relative layout and place imageview and set the property android:layout_alignParentTop="true" to the imageview and it vll be always top and put gravity center for it – King of Masses Nov 20 '15 at 04:08
Sory but i am asking about overlay position using FFMPEG, not in relative layout. – BST Kaal Nov 20 '15 at 05:42
put image to video is a small function in my program, If I use FFMPEG it make my apk increate to > 10MB. Did you have solution for this problem ? – mdtuyen Feb 03 '16 at 13:11
Will this work if I am drawing to canvas over video? Should I first convert the canvas drawing to jpeg? – HB. Apr 08 '17 at 04:37
Hi @KingofMasses, I would like to ask whether the overlay functionality is available for `MediaCodec`. In our app, we have already been using `MediaCodec` for processing video. And because of some reasons, I would like to put ffmpeg as the last option. What I'm looking into is the ability to overlay an animated image over a short video, something like this: [Youtube](https://youtu.be/v5h2tI_Bia0?t=2m33s) – vxh.viet Nov 29 '17 at 03:22

score 1 · Answer 2 · answered Apr 29 '15 at 15:14

Assuming you mean placing it just as a view overlay, it can be easily done in your layout XML.

You can place one view over another using FrameLayout or RelativeLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <VideoView  
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" />

  <TextView
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="20dip"
    android:layout_gravity="center_horizontal|bottom"

    android:padding="12dip"

    android:background="#AA000000"
    android:textColor="#ffffffff"

    android:text="My customised view" />
</FrameLayout>

Put Image above Video and save video in android

2 Answers2