4_2-带货场景-播放器
- 1 Feature Overview
- 2 Usage Demo
- 3 Interface Introduction
- 4 Implementation Introduction
- 5 Control Bar
1 Feature Overview
Video playback is a fundamental feature provided in multi-scenario projects. The e-commerce scenario utilizes both live and playback players. In the e-commerce scenario module, the entire layout area of the live player is encapsulated as PLVECLiveVideoLayout, and the entire layout area of the playback player is encapsulated as PLVECPlaybackVideoLayout. Both implement the IPLVECVideoLayout interface.
Unlike the cloud classroom scenario, the player layout in the e-commerce scenario does not include a control bar. The control bar is implemented via a Fragment overlaid on top of the player, such as the playback PLVECPalybackHomeFragment. For details, refer to the Control Bar section.
2 Usage Demo
The following example demonstrates how to create a live player layout and a playback player layout, along with their initialization and video playback. The code is as follows:
// 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();
Specific use cases for the above methods can be found in the PLVECLiveEcommerceActivity within the polyv demo project.
3 Interface Introduction
3.1 IPLVECVideoLayout
An interface encapsulating the player layout for the e-commerce scenario. It defines:
- Methods directly callable externally (including common methods, live-specific methods, and playback-specific methods).
- Event listeners that require external responses.
For details on the purpose, parameters, and return values of each method, please refer to the IPLVECVideoLayout interface definition.
4 Implementation Introduction
4.1 PLVECLiveVideoLayout
The live player layout for the e-commerce scenario, implementing the IPLVECVideoLayout interface.
This layout includes elements such as the live player, sub-player, logo, and play/pause button at the center of the screen.
Below are the main methods involved in this layout.
4.1.1 View Initialization Method
PLVECLiveVideoLayout inherits from FrameLayout. In the constructor, the initView method is used to initialize 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 Data Initialization Method
The init method of PLVECLiveVideoLayout is an external API. It requires external input of IPLVLiveRoomDataManager for initialization.
// 播放器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() {
//...
}
The code follows the MVP pattern, where all business logic is handled through Presenter, isolating the view layer View from the data layer Model.
4.1.3 Playback Start Method
The startPlay method of PLVECLiveVideoLayout is an external API. Internally, it calls the startPlay method of PLVLivePlayerPresenter to load and play the video.
@Override
public void startPlay() {
livePlayerPresenter.startPlay();
}
PLVECLiveVideoLayout internally holds PLVLivePlayerPresenter, allowing not only internal calls to player-related methods but also encapsulation into interfaces for external use. The startPlay method is one such example.
4.2 PLVECPlaybackVideoLayout
The playback player layout for the e-commerce scenario, implementing the IPLVECVideoLayout interface.
This layout includes elements such as the playback player, sub-player, logo, and play/pause button at the center of the screen.
Below are the main methods involved in this layout.
4.2.1 View Initialization Method
PLVECPlaybackVideoLayout inherits from FrameLayout. In the constructor, the initView method is used to initialize 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 Data Initialization Method
The init method of PLVECPlaybackVideoLayout is an external API. It requires external input of IPLVLiveRoomDataManager for initialization.
// 播放器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 Playback Start Method
The startPlay method of PLVECPlaybackVideoLayout is an external API. Internally, it calls the startPlay method of PLVPlaybackPlayerPresenter to load and play the video.
@Override
public void startPlay() {
playbackPlayerPresenter.startPlay();
}
PLVECPlaybackVideoLayout internally holds PLVPlaybackPlayerPresenter, allowing not only internal calls to player-related methods but also encapsulation into interfaces for external use. The startPlay method is one such example.
5 Control Bar
Neither the live player layout PLVECLiveVideoLayout nor the playback player layout PLVECPlaybackVideoLayout in the e-commerce scenario includes control bar components. The control bar is implemented via a Fragment overlaid on top of the player layout.
5.1 Playback Control Bar - PLVECPalybackHomeFragment
PLVECPalybackHomeFragment is the playback home page, including host information, playback controls, progress bar, and more.
Playback-related operations are implemented by calling the callback interface playbackHomeViewActionListener set via PLVECLiveEcommerceActivity. Below is an example of toggling the play/pause button:
// 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;
}
// 其它接口方法实现...
}
