How should I create a ConcatenatingMediaSource containing URIs of video and image files for an exoplayer?

Question

I have created a concatenatingMediaSource but it skips over the image uris. I know exoplayer doesn't support image files. I am trying to pause and hide the exoplayer when an image uri comes and load the image in an imageview.

 public void loadMediaSources(){
            MediaSource[] mediaSourcesToLoad = new MediaSource[stories.size()];
            for(int i=0;i<stories.size();i++){
                MediaSource mediaSource = new ExtractorMediaSource(Uri.parse(stories.get(i).getVideoUrl()),
                        dataSourceFactory, extractorsFactory, null, null);
                mediaSourcesToLoad[i] = mediaSource;
            }

            mediaSources = new ConcatenatingMediaSource(mediaSourcesToLoad);

   if(player!=null && mediaSources!=null){
            player.prepare(mediaSources);
        }
}

@Override
public void onPositionDiscontinuity() {
        exoPlayerView.setVisibility(View.VISIBLE);
        ivStory.setVisibility(View.VISIBLE);
        mPosition = player.getCurrentWindowIndex();
        Log.d("Position of Video", String.valueOf(mPosition));

        if(stories!=null && stories.size()>0 && stories.get(player.getCurrentWindowIndex()).getPhotoUrl()!=null){
            viewPhoto(stories.get(player.getCurrentWindowIndex()).getPhotoUrl());
        }
    }



private void viewPhoto(String url){

        Glide.with(this).load(url).listener(new RequestListener<String, GlideDrawable>() {
            @Override
            public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                stopPlayingVideo();
                exoPlayerView.setVisibility(View.INVISIBLE);
                ivStory.setVisibility(View.VISIBLE);
                return false;
            }
        }).into(ivStory);

    }

Hi bro.. if you get any solution please mention me. I am also looking for this solution. pls help me out — Ranjithkumar, Nov 07 '17 at 13:16
@RanjithKumar You can track the issue here as well. https://github.com/google/ExoPlayer/issues/3434 — sachinsharma, Nov 07 '17 at 13:24
ok thanks. I am also looking for solution. If I found I will also post answer. — Ranjithkumar, Nov 07 '17 at 13:30
Hi bro. need help for image to mediasource conversion.. can you post your answer here - https://stackoverflow.com/questions/47263105/how-to-convert-the-single-image-to-mp4-video-in-android — Ranjithkumar, Nov 13 '17 at 11:36

Mr. Blurred · Accepted Answer · 2017-11-13T16:59:28.390

2

Currently ExoPlayer does not provide any built in support for playback of images. You can generate N seconds monochrome video (using ffmpeg for example) which you play for image tracks.

private MediaSource trackToMediaSource(@NonNull Track track) {
    MediaSource source;
    Uri trackUri;
    switch (track.getType()) {
        case VIDEO:
            trackUri = Uri.parse(track.getUrl());
            ...
            break;
        case IMAGE:
            // Currently images are not supported. We use hardcoded video URL as a workaround.
            trackUri = Uri.parse("asset:///blue.mp4");
            ...
            break;
        ...
    }
        ...
    return source;
}

FFmpeg command:

ffmpeg -f lavfi -i color=c=#10408c -t 5 blue.mp4

Show ImageView when player switches to image track:

@Override
public void onPositionDiscontinuity() {
    int currentTrack = player.getCurrentWindowIndex();
    Track track = tracks.get(currentTrack);
    switch (track.getType()) {
        case IMAGE:
            showImageAbovePlayer(track.getUrl()); // blue.mp4 is played for 5 seconds under the image, but user sees only image
            break;
        case VIDEO:
            hideImageAbovePlayer(); // hide image, user sees current video track
            break;
    }
}

edited Nov 13 '17 at 16:59

answered Nov 08 '17 at 08:21

Mr. Blurred

1,519
1
10
7

can you explain how we convert image/imageurl to mediasource? if you explain it will very helpful for me. thanks. – Ranjithkumar Nov 13 '17 at 09:33
if possible please post your answer same like this answer https://stackoverflow.com/questions/47263105/how-to-convert-the-single-image-to-mp4-video-in-android – Ranjithkumar Nov 13 '17 at 11:28
@RanjithKumar you don't need to create MediaSource from imageUrl. ExoPlayer has no renderer for image playback. My idea was to create MediaSource from monochrome video and show image above player when it starts playing this monochrome video. I updated my answer to show where you can show/hide image. – Mr. Blurred Nov 13 '17 at 16:59
good hack. thanks for updated answer.. I am not able to one more vote for this updated answer :) – Ranjithkumar Nov 14 '17 at 05:01

How should I create a ConcatenatingMediaSource containing URIs of video and image files for an exoplayer?

1 Answers1