Multiple Youtubeplayerfragments Inside A Horizontal Scrollview - All The Players Display The Last Loaded Video

I want to show multiple YouTube videos in a Horizontal ScrollView. For that, I'm adding YouTubePlayerFragments dynamically. Here's the piece of my code: //set videos int coun

Solution 1:

I dont think it is possible to create multiple instance of YouTube Player Fragment as it is Singleton.

No matter how many instances you make they all gone be same and your horizontal scrollview will show thumbnail of last VideoFragment you added .

Alternatively you can give an illusion of multiple YouTube Fragment by showing video thumb and on click of thumb play the video with the help of youtube player

// get thumbnail image of that video by videoID
      String videoThumbUrl="http://img.youtube.com/vi/"+videoId+"/0.jpg";

      //Load thumb in viewpager/Hrizontal scrollview/Recycle View with the    //help of Picasso/Glide/UIL etc     
      Picasso.with(getActivity())
                    .load(videoThumbUrl) 
                    .into(videoThumbImageView);

And then on click of thumb you can add youtube fragment in View container holding imageview and start playing video with the video id

videoThumbImageView.setOnClickListenr(..)
{...

 //Add Youtube fragment in container and start playing video
}

This is just a pseudo code but you get and idea.

Edit

Added code for how to play and stop videos on tap of thumbnails.

I was offline so was unable to use YouTube fragment so I used Videoview to play random videos you can replace videoview with YouTube fragment and. Guranteed it still gone work great

Array list to hold list of videos

publicstaticArrayList<VideoModel> listOfVideos = new ArrayList<>();

Variable to keep track of current playing video

// Allows to remember the last item shown on screenprivateint lastPosition = 0;

Recycler view item click listener

   videoGridAdapter.setOnCardClickListner(new VideoGridAdapter.OnCardClickListner() {
            @Override
            publicvoidOnCardClicked(View view, int position) {

                //Make Lats Tapped item playing false
                listOfVideos.get(lastPosition).setPlaying(false);

                //Make current Tapped item playing true
                listOfVideos.get(position).setPlaying(true);

                // update pointer of last tapped video to current tapped video
                lastPosition = position;

                //LET RCYCLERVIEW ADAPTER DO THE MAGIC
                videoGridAdapter.notifyDataSetChanged();
            }
        });

VideoModel class

        **
 * Created by Hitesh on 20-07-2016.
 */
publicclassVideoModel {

    public int getImageURLTest() {
        return imageURLTest;
    }

    //Test Dataprivate int imageURLTest;

    //Real Time DataprivateString videoURL;
    privateString imageURL;
    privateboolean isPlaying;

    publicVideoModel(String videoURL, boolean isSelected, int imageURLTest) {
        this.videoURL = videoURL;
        this.isPlaying = isSelected;
        this.imageURLTest = imageURLTest;
    }

    publicbooleanisPlaying() {
        return isPlaying;
    }

    publicvoidsetPlaying(boolean playing) {
        isPlaying = playing;
    }

    /**
     * @return Youtube URl of Video
     */publicStringgetVideoURL() {
        return videoURL;
    }

    /**
     * @return Thumbnail of Video using video ID
     */publicStringgetImageURL() {
        //Derive Image URl from Video URl using Video IDreturn imageURL;
    }
}

Adpter itself

import android.content.Context;
import android.media.MediaPlayer;
import android.net.Uri;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

import com.hiteshsahu.videoinraw.R;
import com.hiteshsahu.videoinraw.ui.activity.VideoGridActivity;
import com.squareup.picasso.Callback;
import com.squareup.picasso.NetworkPolicy;
import com.squareup.picasso.Picasso;

publicclassVideoGridAdapterextendsRecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context context;

    private OnCardClickListner onCardClickListner;

    publicVideoGridAdapter() {

    }

    @Overridepublic RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                      int viewType) {
        RecyclerView.ViewHolder viewHolder;

        context = parent.getContext();

        // create a new viewViewv= LayoutInflater.from(parent.getContext())
                .inflate(R.layout.video_row, parent, false);

        // set the view's size, margins, paddings and layout parameters
        viewHolder = newVideoViewHolder(v);

        return viewHolder;
    }

    // Replace the contents of a view (invoked by the layout manager)@OverridepublicvoidonBindViewHolder(final RecyclerView.ViewHolder holder, finalint position) {
        VideoViewHoldervideoHolder= (VideoViewHolder) holder;

        if (VideoGridActivity.listOfVideos.get(position).isPlaying()) {

            //Playing Video :- Show VideoView and make play button GONE
            ((VideoViewHolder) holder).getVideoView().setVisibility(View.VISIBLE);
            ((VideoViewHolder) holder).getPlayButton().setVisibility(View.GONE);

            //Play Video in video View
            ((VideoViewHolder) holder).getVideoView().setVisibility(View.VISIBLE);
            ((VideoViewHolder) holder).getVideoView().setVideoURI(Uri.parse(VideoGridActivity.listOfVideos.get(position).getVideoURL()));
            // MediaControlandroid.widget.VideoView videoView = (VideoView) headerView.findViewById(R.id.vdo_banner);ler md = new MediaController(getActivity());
            ((VideoViewHolder) holder).getVideoView().setMediaController(null);
            ((VideoViewHolder) holder).getVideoView().requestFocus();
            // videoView.setZOrderOnTop(true);
            ((VideoViewHolder) holder).getVideoView().start();
            ((VideoViewHolder) holder).getVideoView().setOnTouchListener(newView.OnTouchListener() {

                @OverridepublicbooleanonTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stubreturntrue;
                }
            });

            ((VideoViewHolder) holder).getVideoView().setOnPreparedListener(newMediaPlayer.OnPreparedListener() {

                @OverridepublicvoidonPrepared(MediaPlayer mp) {
                    // TODO Auto-generated method stub
                    mp.setLooping(true);
                }
            });

        } else {

            //Not playing make videoview gone and show play button
            ((VideoViewHolder) holder).getVideoView().setVisibility(View.GONE);
            ((VideoViewHolder) holder).getPlayButton().setVisibility(View.VISIBLE);

        }

        //set thumbnail image using video url
        Picasso.with(context)
                .load(VideoGridActivity.listOfVideos.get(position).getImageURL()).fit().placeholder(VideoGridActivity.listOfVideos.get(position).getImageURLTest())
                .networkPolicy(NetworkPolicy.OFFLINE).fit()
                .centerCrop()
                .into(((VideoViewHolder) holder).getVideoThumb(), newCallback() {
                    @OverridepublicvoidonSuccess() {
                    }

                    @OverridepublicvoidonError() {
                        // Try again online if cache failed
                        Picasso.with(context)
                                .load(VideoGridActivity.listOfVideos.get(position).getImageURL()).fit().placeholder(VideoGridActivity.listOfVideos.get(position).getImageURLTest())
                                .centerCrop()
                                .into(((VideoViewHolder) holder).getVideoThumb());
                    }
                });


        ((VideoViewHolder) holder).getContainer().setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View v) {
                onCardClickListner.OnCardClicked(v, position);


            }
        });

    }

    @OverridepublicintgetItemCount() {
        return VideoGridActivity.listOfVideos.size();
    }

    publicvoidsetOnCardClickListner(OnCardClickListner onCardClickListner) {
        this.onCardClickListner = onCardClickListner;
    }

    publicinterfaceOnCardClickListner {
        voidOnCardClicked(View view, int position);
    }

}

Layout activity main

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context=".ui.activity.VideoGridActivity"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay" /></android.support.design.widget.AppBarLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/video_grid"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerVertical="true"android:foregroundGravity="center"app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v7.widget.RecyclerView></RelativeLayout><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|end"android:layout_margin="@dimen/fab_margin"android:src="@android:drawable/ic_dialog_dialer" /></android.support.design.widget.CoordinatorLayout>

Recyclerview item

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/root_container"android:layout_width="match_parent"android:layout_height="200dp"android:layout_margin="5dp"><ImageViewandroid:id="@+id/video_thumb"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="fitXY" /><VideoViewandroid:id="@+id/video_view"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:visibility="gone" /><!--Add a mask over video thumbnail with a play button icon--><RelativeLayoutandroid:id="@+id/play_button"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#68472986"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_gravity="center"android:src="@android:drawable/ic_media_play" /></RelativeLayout></FrameLayout>