零基础玩转Banner 2.0视频轮播：从VideoHolder到流畅播放全攻略

你是否还在为Android应用中的视频轮播功能开发烦恼？播放器与轮播控件冲突、滑动时视频无法自动暂停、自定义指示器难以集成？本文将通过Banner 2.0框架的VideoHolder组件，手把手教你实现专业级视频轮播功能，让你的应用轻松拥有淘宝商品详情页般的流畅媒体体验。

核心组件解析

Banner 2.0的视频轮播功能基于ViewPager2实现，主要依赖以下核心模块：

• 视频载体：VideoHolder.java负责视频播放器的初始化与生命周期管理
• 播放控制：集成GSYVideoPlayer实现媒体播放功能，支持暂停/ resume/释放资源
• 轮播容器：Banner.java提供轮播控制与页面切换监听
• 布局配置：activity_video.xml与banner_video.xml定义界面结构

快速集成步骤

1. 布局文件配置

首先在Activity布局中添加Banner控件，设置固定高度并禁用无限循环（视频轮播通常为首屏展示）：

<!-- activity_video.xml -->
<com.youth.banner.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:banner_infinite_loop="false"
    app:layout_constraintTop_toTopOf="parent"/>

创建视频项布局，引入GSYVideoPlayer作为播放容器：

<!-- banner_video.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.shuyu.gsyvideoplayer.video.StandardGSYVideoPlayer
        android:id="@+id/player"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

2. VideoHolder实现

自定义VideoHolder继承RecyclerView.ViewHolder，初始化视频播放器实例：

public class VideoHolder extends RecyclerView.ViewHolder {
    public StandardGSYVideoPlayer player;

    public VideoHolder(@NonNull View view) {
        super(view);
        player = view.findViewById(R.id.player); // 绑定布局中的播放器
    }
}

3. Activity集成逻辑

在VideoActivity中完成轮播配置，关键实现以下功能：

// 设置带视频的混合类型适配器
banner.addBannerLifecycleObserver(this)
      .setAdapter(new MultipleTypesAdapter(this, DataBean.getTestDataVideo()))
      .setIndicator(new NumIndicator(this)) // 数字指示器
      .setIndicatorGravity(IndicatorConfig.Direction.RIGHT)
      .addOnPageChangeListener(new OnPageChangeListener() {
          @Override
          public void onPageSelected(int position) {
              stopVideo(position); // 页面切换时暂停视频
          }
      });

高级功能实现

页面切换视频控制

实现滑动时自动暂停非当前页视频的核心逻辑：

private void stopVideo(int position) {
    if (player == null) {
        RecyclerView.ViewHolder viewHolder = banner.getAdapter().getViewHolder();
        if (viewHolder instanceof VideoHolder) {
            VideoHolder holder = (VideoHolder) viewHolder;
            player = holder.player;
        }
    }
    if (position != 0) { // 假设视频在第0个位置
        player.onVideoPause();
    }
}

生命周期管理

重写Activity生命周期方法，确保视频资源正确释放：

@Override
protected void onPause() {
    super.onPause();
    if (player != null) player.onVideoPause();
}

@Override
protected void onDestroy() {
    super.onDestroy();
    GSYVideoManager.releaseAllVideos(); // 释放所有视频资源
}

自定义数字指示器

使用NumIndicator实现淘宝风格的数字指示器，在VideoActivity中配置：

.setIndicator(new NumIndicator(this))
.setIndicatorGravity(IndicatorConfig.Direction.RIGHT)

常见问题解决方案

播放器与ViewPager2滑动冲突

问题：滑动轮播时视频播放控件抢占触摸事件
解决：在banner_video.xml中设置播放器触摸监听优先级：

player.setIsTouchWiget(false); // 禁用播放器自带的触摸控制

内存泄漏风险

确保在Activity销毁时释放所有视频资源，关键代码位于VideoActivity.java：

@Override
protected void onDestroy() {
    super.onDestroy();
    GSYVideoManager.releaseAllVideos();
}

项目资源参考

• 示例代码：VideoActivity完整实现
• 布局文件：视频轮播布局集合
• 官方文档：README.md
• 轮播transformer：动画效果实现

通过本文介绍的方法，你已经掌握了Banner 2.0视频轮播的核心实现逻辑。这个方案不仅适用于商品详情页，还可广泛应用于广告轮播、教程展示等场景。收藏本文，下次开发视频轮播功能时直接复用，让你的应用轻松拥有专业级媒体体验！

下期预告：自定义Indicator实现与高级动画效果，敬请关注。