视频在播放前闪烁黑色 (ExoPlayer)

use*_*651 7 android android-video-player exoplayer exoplayer2.x

我在 RecyclerView 中使用 ExoPlayer。

我现在的工作方式是:

  • 仅使用一个 ExoPlayer 实例
  • 当 RecyclerView 项目进入视图时,它会准备播放器并将 PlayerView 附加到布局
  • 当 RecyclerView 项目消失时,它会调用 setPlayer(null) 并从布局中删除 PlayerView

然而,当滚动浏览我的 RecyclerView 时,每个视频在播放前都会短暂(毫秒)闪烁黑色,如下面的视频所示:

https://user-images.githubusercontent.com/30815862/128436800-d2153174-e768-4181-9fc0-19d9dec52efb.mp4

我究竟做错了什么?我可以更改什么来防止视频播放前出现黑屏闪烁?

以下是我的 RecyclerView 适配器的相关部分:

public class PostAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context;
    private SimpleExoPlayer exoPlayer;
    private HlsMediaSource.Factory hlsMediaSourceFactory;

    public PostAdapter(Context context) {
        this.context = context;
        this.exoPlayer = new SimpleExoPlayer.Builder(context)
                .build();
        this.exoPlayer.setVideoTextureView(new TextureView(context));
        this.hlsMediaSourceFactory = new HlsMediaSource.Factory(CustomMediaSourceFactory.buildMediaSourceFactory())
                .setAllowChunklessPreparation(true); // TODO: Look into this
    }

    public class PostViewHolder extends RecyclerView.ViewHolder {
        public ConstraintLayout videoContainer;
        public ImageView videoThumbnail;
        public HlsMediaSource hlsMediaSource;
        public FrameLayout playerViewContainer;
        public PlayerView playerView;
        public Player.Listener playerListener;

        public PostViewHolder(View v) {
            super(v);

            videoContainer = v.findViewById(R.id.video_container);
            videoThumbnail = v.findViewById(R.id.video_thumbnail);
            playerViewContainer = v.findViewById(R.id.player_view_container);

            playerView = new PlayerView(context);
            playerView.setUseController(false);
            playerView.setKeepContentOnPlayerReset(true);
        }

        public void prepareVideo() {
            if (exoPlayer == null) {
                return;
            }

            if (exoPlayer.getCurrentMediaItem() != hlsMediaSource.getMediaItem()) {
                playerListener = new Player.Listener() {
                    @Override
                    public void onPlaybackStateChanged(int state) {
                        if (state == Player.STATE_READY) {
                            int index = playerViewContainer.indexOfChild(playerView);
                            if (index == -1) {
                                // Add the player view to the layout
                                playerViewContainer.addView(playerView);
                                playerView.setVisibility(View.VISIBLE);
                            }
                        }
                    }
                };

                exoPlayer.addListener(playerListener);

                exoPlayer.setVolume(0);
                exoPlayer.setRepeatMode(Player.REPEAT_MODE_ALL);

                // Set the media item to be played.
                exoPlayer.setMediaSource(hlsMediaSource);

                // Prepare the player
                exoPlayer.prepare();

                // Attach the player to the view
                playerView.setPlayer(exoPlayer);
            }

            // Play
            playVideo();
        }

        public void playVideo() {
            if (exoPlayer != null) {
                exoPlayer.play();
            }
        }

        // This is called when the RecyclerView item comes into view
        public void attachPlayer() {
            // Prepare the video
            prepareVideo();
        }

        // This is called when the RecyclerView item goes out of view
        public void detachPlayer() {
            playerView.setPlayer(null);

            if (playerListener != null) {
                exoPlayer.removeListener(playerListener);
            }

            // Remove the player view from the layout
            if (playerView.getParent() != null) {
                playerView.setVisibility(View.GONE);
                ((ViewGroup) playerView.getParent()).removeView(playerView);
            }
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        final Post post = (Post) data.get(position);
        Video video = post.getVideo();

        if (video != null) {
            Glide.with(context)
                    .load(video.getThumbnailUrl())
                    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .into(holder.videoThumbnail);

            if (video.getUrls() != null && video.getUrls().getHls() != null) {
                holder.hlsMediaSource = hlsMediaSourceFactory.createMediaSource(MediaItem.fromUri(video.getUrls().getHls()));
            }
        }

        holder.videoContainer.setVisibility(View.VISIBLE);
    }
}
Run Code Online (Sandbox Code Playgroud)

这是我的布局的相关部分:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/video_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/video_thumbnail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <FrameLayout
            android:id="@+id/player_view_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
Run Code Online (Sandbox Code Playgroud)

任何建议表示赞赏!

小智 5

我希望现在还不算太晚。检查您的播放器视图 XML。确保其背景设置为透明。设置app:shutter_background_color为透明也可以解决这个问题。

  • 是的,这个解决方案解决了我的问题,谢谢 (2认同)
  • 这并没有解决播放视频时黑屏闪烁的问题,将sureface_type更改为texture_view解决了它。 (2认同)