水平滾動視圖中的多個YouTubePlayerFragments - 所有玩家都顯示最後加載的視頻

Question

我想在水平滾動視圖中顯示多個YouTube視頻。爲此，我將動態添加YouTubePlayerFragments。這是我的代碼片段：

//set videos 

    int count = 0; 
    FragmentTransaction transaction = getChildFragmentManager().beginTransaction(); 

    for (final Video video : mVideos) { 

     //create an instance of a video fragment 
     final VideoFragment fragment = new VideoFragment();// VideoFragment extends YouTubePlayerFragment 
     Bundle bundle = new Bundle(); 
     if (null != mVideos && 0 < mVideos.size()) { 
      bundle.putString(VideoFragment.KEY_VIDEO_KEY, video.getKey()); 
     } 
     fragment.setArguments(bundle); 

     FrameLayout frameLayout = new FrameLayout(getActivity()); 
     frameLayout.setLayoutParams(new FrameLayout.LayoutParams(900, 500)); 
     frameLayout.setPadding(10, 0, 10, 0); 
     frameLayout.setId(12345 + ++count); 
     mLayoutTrailers.addView(frameLayout);//mLayoutTrailers is a LinearLayout inside my Horizontal ScrollView 

     transaction.add(frameLayout.getId(), fragment, VideoFragment.TAG + count); 
    } 

    transaction.commit(); 

我正在初始化我的VideoFragment OnResume內的YouTube播放器。以下是視頻如何加載。

它顯示了所有球員的最後加載視頻。我進行了調試 - 它用第一個視頻初始化所有的球員，然後用第二個視頻&等所有的球員，直到最後一個。

The issue is already discussed here.似乎有一個工作，初始化播放器裏面的「setUserVisibleHint（布爾isVisibleToUser）」在我的onResume（）代替VideoFragment左右，但我不知道如何使用我的Horizo​​ntalScrollView

有沒有一種方法可以在Horizo​​ntal ScrollView中加載多個YouTube視頻？

任何形式的幫助將不勝感激！

Answer 1

我不認爲有可能創建多個YouTube播放器片段實例，因爲它是Singleton。

無論您創建了多少個實例，它們都是相同的，您的水平滾動視圖將顯示您添加的最後一個VideoFragment的縮略圖。

或者，你可以在顯示視頻拇指給出錯覺多個YouTube片段和拇指的點擊播放視頻與YouTube播放器

 // 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); 

的幫助，然後拇指的點擊，您可以添加在查看容器保持imageview的YouTube的片段，並開始播放視頻與視頻ID

videoThumbImageView.setOnClickListenr(..) 
{... 

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

這只是一個僞代碼，但你和想法。

編輯如何播放和停止對縮略圖的自來水視頻

添加的代碼。

我離線時無法使用YouTube片段，因此我使用Videoview播放隨機視頻，您可以使用YouTube片段和視頻替換videoview。存在保證它仍然去工作的高度

數組列表來保存視頻

public static ArrayList<VideoModel> listOfVideos = new ArrayList<>(); 

變量列表，以保持當前正在播放的視頻

 // Allows to remember the last item shown on screen 
     private int lastPosition = 0; 

回收站視圖項點擊收聽的曲目

videoGridAdapter.setOnCardClickListner(new VideoGridAdapter.OnCardClickListner() { 
      @Override 
      public void OnCardClicked(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類

 ** 
* Created by Hitesh on 20-07-2016. 
*/ 
public class VideoModel { 

    public int getImageURLTest() { 
     return imageURLTest; 
    } 

    //Test Data 
    private int imageURLTest; 

    //Real Time Data 
    private String videoURL; 
    private String imageURL; 
    private boolean isPlaying; 

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

    public boolean isPlaying() { 
     return isPlaying; 
    } 

    public void setPlaying(boolean playing) { 
     isPlaying = playing; 
    } 

    /** 
    * @return Youtube URl of Video 
    */ 
    public String getVideoURL() { 
     return videoURL; 
    } 

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

Adpter本身

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; 

public class VideoGridAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { 

    private Context context; 

    private OnCardClickListner onCardClickListner; 

    public VideoGridAdapter() { 

    } 

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

     context = parent.getContext(); 

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

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

     return viewHolder; 
    } 

    // Replace the contents of a view (invoked by the layout manager) 
    @Override 
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) { 
     VideoViewHolder videoHolder = (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(new View.OnTouchListener() { 

       @Override 
       public boolean onTouch(View v, MotionEvent event) { 
        // TODO Auto-generated method stub 
        return true; 
       } 
      }); 

      ((VideoViewHolder) holder).getVideoView().setOnPreparedListener(new MediaPlayer.OnPreparedListener() { 

       @Override 
       public void onPrepared(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(), new Callback() { 
        @Override 
        public void onSuccess() { 
        } 

        @Override 
        public void onError() { 
         // 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(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       onCardClickListner.OnCardClicked(v, position); 


      } 
     }); 

    } 

    @Override 
    public int getItemCount() { 
     return VideoGridActivity.listOfVideos.size(); 
    } 

    public void setOnCardClickListner(OnCardClickListner onCardClickListner) { 
     this.onCardClickListner = onCardClickListner; 
    } 

    public interface OnCardClickListner { 
     void OnCardClicked(View view, int position); 
    } 

} 

佈局活動主

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns: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.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android: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> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.v7.widget.RecyclerView 
      android: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.FloatingActionButton 
     android: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項

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns: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"> 


    <ImageView 
     android:id="@+id/video_thumb" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="fitXY" /> 


    <VideoView 
     android: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--> 
    <RelativeLayout 
     android:id="@+id/play_button" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#68472986"> 

     <ImageView 
      android: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>