保利威文档中心

幫助中心

4_2-带货场景-播放器

更新時間：2023-04-17 15:27:57

1 功能概述

影片播放是多場景專案中提供的基礎功能，帶貨場景會使用到直播播放器和回放播放器。在帶貨場景模組中，對直播播放器整個佈局區域的元素封裝為 PLVECLiveVideoLayout，對回放播放器整個佈局區域的元素封裝為 PLVECPlaybackVideoLayout，它們共同實作 IPLVECVideoLayout 介面。

與雲課堂場景不同，帶貨場景的播放器佈局不包括控制欄，控制欄是透過疊加在播放器上層的 Fragment 來實現的，例如回放的 PLVECPalybackHomeFragment，具體細節請見控制欄章節。

2 使用演示

以下範例說明如何建立直播播放器佈局、回放播放器佈局，以及它們的初始化及影片播放，程式碼如下：

// PLVECLiveEcommerceActivity.java

if (liveRoomDataManager.getConfig().isLive()) {
    // 页面底层播放器 - 直播
    videoLayout = new PLVECLiveVideoLayout(this);
} else {
    // 页面底层播放器 - 回放
    videoLayout = new PLVECPlaybackVideoLayout(this);
}
// 播放器容器
FrameLayout videoContainer = findViewById(R.id.plvec_fl_video_container);
// 添加播放器到容器中
videoContainer.addView((View) videoLayout, FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
// 初始化播放器、播放
videoLayout.init(liveRoomDataManager);
videoLayout.setOnViewActionListener(new IPLVECVideoLayout.OnViewActionListener() {
    @Override
    public void onCloseFloatingAction() {
        if (floatingWindowBinder != null) {
            floatingWindowBinder.dismiss();
        }
        //主动关闭浮窗时，播放器静音
        videoLayout.setPlayerVolume(0);
        isUserCloseFloatingWindow = true;
    }
});
//当前activity 可以手势操作暂停和播放
initGesture();
videoLayout.startPlay();

上述方法的具體用例可以在 polyv demo 專案中的 PLVECLiveEcommerceActivity 找到。

3 介面介紹

3.1 IPLVECVideoLayout

帶貨場景下，針對播放器佈局進行封裝的介面。定義了：

1、外部直接呼叫的方法（包括 common 通用方法、live 直播特有方法、playback 回放特有方法） 2、需要外部回應的事件監聽器

具體各個方法的用途、呼叫參數及回傳值等，請參考 IPLVECVideoLayout 介面定義。

4 實作介紹

4.1 PLVECLiveVideoLayout

帶貨場景下的直播播放器佈局，實作 IPLVECVideoLayout 介面。

該佈局包含的元素有：直播播放器、子播放器、Logo、螢幕中央的播放暫停按鈕等 UI。

下面會列舉介紹該佈局中涉及到的主要方法。

4.1.1 初始化 view 方法

PLVECLiveVideoLayout 繼承於 FrameLayout，在建構子中對使用 initView 方法對 view 進行了初始化處理。

public PLVECLiveVideoLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView();
}

private void initView() {
    // 布局初始化
    LayoutInflater.from(getContext()).inflate(R.layout.plvec_live_player_layout, this, true);

    // findView....
    
    // 其它初始化方法
    initVideoView();
    initSubVideoViewChangeListener();
}
4.1.2 初始化資料方法

PLVECLiveVideoLayout 的 init 方法是對外 API，需要外部傳入 IPLVLiveRoomDataManager 後進行初始化。

// 播放器presenter
private IPLVLivePlayerContract.ILivePlayerPresenter livePlayerPresenter;

public void init(IPLVLiveRoomDataManager liveRoomDataManager) {
    this.liveRoomDataManager = liveRoomDataManager;

    livePlayerPresenter = new PLVLivePlayerPresenter(liveRoomDataManager);
    livePlayerPresenter.registerView(livePlayerView);
    livePlayerPresenter.init();
    livePlayerPresenter.setAllowOpenAdHead(isAllowOpenAdHead);
}

// 创建播放器mvp-view
private IPLVLivePlayerContract.ILivePlayerView livePlayerView = new PLVAbsLivePlayerView() {
     //...
}

程式碼遵循 MVP 模式，一切業務邏輯都是透過 Presenter 來進行操作，隔離了檢視層 View 和資料層 Model。

4.1.3 開始播放方法

PLVECLiveVideoLayout 的 startPlay 方法是對外 API，該方法內部會呼叫 PLVLivePlayerPresenter 的 startPlay 方法來進行影片的載入及播放。

@Override
public void startPlay() {
    livePlayerPresenter.startPlay();
}

PLVECLiveVideoLayout 內部持有 PLVLivePlayerPresenter，因此除了內部可以自由呼叫播放器相關的方法外，也能將其封裝成介面提供給外層呼叫，startPlay 方法就是其中一個例子。

4.2 PLVECPlaybackVideoLayout

帶貨場景下的回放播放器佈局，實作 IPLVECVideoLayout 介面。

該佈局包含的元素有：回放播放器、子播放器、Logo、螢幕中央的播放暫停按鈕等 UI。

下面會列舉介紹該佈局中涉及到的主要方法。

4.2.1 初始化 view 方法

PLVECPlaybackVideoLayout 繼承於 FrameLayout，在建構子中對使用 initView 方法對 view 進行了初始化處理。

public PLVECPlaybackVideoLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView();
}

private void initView() {
    // 布局初始化
    LayoutInflater.from(getContext()).inflate(R.layout.plvec_playback_player_layout, this, true);

    // findView....
        
    // 其它初始化方法
    initSubVideoViewChangeListener();
}
4.2.2 初始化資料方法

PLVECPlaybackVideoLayout 的 init 方法是對外 API，需要外部傳入 IPLVLiveRoomDataManager 後進行初始化。

// 播放器presenter
private IPLVPlaybackPlayerContract.IPlaybackPlayerPresenter playbackPlayerPresenter;

@Override
public void init(IPLVLiveRoomDataManager liveRoomDataManager) {
    this.liveRoomDataManager = liveRoomDataManager;

    playbackPlayerPresenter = new PLVPlaybackPlayerPresenter(liveRoomDataManager);
    playbackPlayerPresenter.registerView(playbackPlayerView);
    playbackPlayerPresenter.init();
    playbackPlayerPresenter.setAllowOpenAdHead(isAllowOpenAdhead);
}

// 创建播放器mvp-view
private IPLVPlaybackPlayerContract.IPlaybackPlayerView playbackPlayerView = new PLVAbsPlaybackPlayerView() {
    //...
}
4.2.3 開始播放方法

PLVECPlaybackVideoLayout 的 startPlay 方法是對外 API，該方法內部會呼叫 PLVPlaybackPlayerPresenter 的 startPlay 方法來進行影片的載入及播放。

@Override
public void startPlay() {
    playbackPlayerPresenter.startPlay();
}

PLVECPlaybackVideoLayout 內部持有 PLVPlaybackPlayerPresenter，因此除了內部可以自由呼叫播放器相關的方法外，也能將其封裝成介面提供給外層呼叫，startPlay 方法就是其中一個例子。

5 控制欄

帶貨場景的直播播放器佈局 PLVECLiveVideoLayout 和回放播放器佈局 PLVECPlaybackVideoLayout 均不包括控制欄的相關控制項，控制欄是透過疊加在播放器佈局上層的 Fragment 實現的。

5.1 回放控制欄 - PLVECPalybackHomeFragment

PLVECPalybackHomeFragment 是回放首頁頁面，包括主持人資訊、播放控制、進度條、更多。

其中控制播放的相關操作是透過呼叫 PLVECLiveEcommerceActivity 設定的回呼介面 playbackHomeViewActionListener 實現的，下面以切換暫停播放的按鈕舉例：

// PLVECPalybackHomeFragment.java
@Override
public void onClick(View v) {
    int id = v.getId();
    if (id == R.id.play_control_iv) {
        // 这里调用了回调接口的onPauseOrResumeClick方法切换暂停或播放状态
        if (onViewActionListener != null) {
            v.setSelected(onViewActionListener.onPauseOrResumeClick(v));
        }
    }
    // 其它按钮的点击事件...
}

// PLVECLiveEcommerceActivity.java
private PLVECPalybackHomeFragment.OnViewActionListener playbackHomeViewActionListener = new PLVECPalybackHomeFragment.OnViewActionListener() {
    @Override
    public boolean onPauseOrResumeClick(View view) {
        // 接口实现中通过调用videoLayout，即播放器布局的方法，来实现播放控制
        if (!videoLayout.isSubVideoViewShow()) {
            if (videoLayout.isPlaying()) {
                videoPause();
                return false;
            } else {
                videoResume();
                return true;
            }
        }
        return false;
    }
    // 其它接口方法实现...
}
联系客服，在线咨询