8 Triple-Screen Playback

1 Overview

Triple-screen playback is a dual-window playback mode that supports synchronized playback of PPT or PDF documents with video. It uses one large and one small playback window, offers flexible layout, allows free switching of the main screen content, supports setting playback time points for each page of PPT or PDF documents to enable automatic page turning, supports jumping to playback progress by clicking on courseware in the course directory, and supports downloading to the local device for offline playback. This provides possibilities for richer teaching scenarios for customers.

2 Quick Integration

2.1 SDK Version

To use the triple-screen playback feature for on-demand content, upgrade PolyvVodSDK to version 2.10.0 or above. The gradle configuration is as follows:

implementation 'com.easefun.polyv:polyvPlayer:2.10.0'//SDK core package

2.2 Demo Code

The core code related to triple-screen floating windows, PPT, and PPT directories is located in the demo package com.easefun.polyvsdk.ppt. Therefore, this package needs to be copied into your project.

2.3 Demo Example

In the PolyvPlayerActivity class, create the PPT, course directory, and floating window layouts, add them to the interface, use the player's videoView.setOnPPTStatusListener method to listen to the PPT status, and pass it to the corresponding controls for processing. The relevant code is:

//Add vice screen layout
private void addViceScreenLayout(final PolyvVideoView videoView) {
    videoView.post(new Runnable() {
        @Override
        public void run() {
            //Add vice screen layout
            viceScreenLayout = PolyvViceScreenLayout.addViceLayoutInWindow(PolyvPlayerActivity.this, videoView.getBottom());
            mediaController.setPPTLayout(viceScreenLayout, landPptDirLayout);
            //Add PPT layout
            pptView = new PolyvPPTView(PolyvPlayerActivity.this);
            viceScreenLayout.addView(pptView);
            viceScreenLayout.bindView(videoView, pptView);
        }
    });
}
//Listen to PPT status
videoView.setOnPPTStatusListener(new IPolyvOnPPTStatusListener() {
    @Override
    public void onPPTCallback(String vid, boolean hasPPT, PolyvPptInfo pptvo) {
        if (!videoView.isPPTEnabled()) {
            hasPPT = false;
            pptvo = null;
        }
        if (viceScreenLayout != null) {
            viceScreenLayout.acceptPPTCallback(vid, hasPPT, pptvo);
        }
        portPptDirLayout.acceptPPTCallback(videoView, vid, hasPPT, pptvo);
        landPptDirLayout.acceptPPTCallback(videoView, vid, hasPPT, pptvo);
        landPptErrorLayout.acceptPPTCallback(videoView, vid, hasPPT, pptvo);
    }
});

3 Triple-Screen Playback

Online/offline playback for triple-screen still uses the previous method. The only difference is that an additional listener needs to be added to listen for the courseware information of this video, to determine whether the courseware needs to be displayed. The method to set the listener is:

videoView.setOnPPTStatusListener(new IPolyvOnPPTStatusListener() {
    @Override
    public void onPPTCallback(String vid, boolean hasPPT, PolyvPptInfo pptvo) {
    //vid: the vid of the currently playing video
    //hasPPT: whether the currently playing video has courseware
    //pptvo: courseware information, null when retrieval fails (may also be null when hasPPT is true), use the method to reload courseware information
    }
});

4 Displaying PPT

To display courseware, first define the floating window layout, refer to PolyvViceScreenLayout in the demo, and the courseware layout, refer to PolyvPPTView in the demo. After adding the courseware to the floating window layout and adding the floating window layout to the interface, pass the callback parameters of the courseware information listener to the floating window layout.

4.1 PolyvViceScreenLayout

Floating window layout

//Add vice screen layout to the interface
public static PolyvViceScreenLayout addViceLayoutInWindow(Activity activity, int marginTop)
//Receive the callback from the courseware information listener
public void acceptPPTCallback(String vid, boolean hasPPT, PolyvPptInfo pptvo)
//Bind the player and courseware layout
public void bindView(PolyvVideoView videoView, PolyvPPTView pptView)
//Whether the current courseware is displayed on the main screen
public boolean isPPTInMinScreen()
//Switch the positions of courseware and player
public void switchLocation()
//Hide
public void hide()
//Show
public void show()
//Destroy
public void destroy()

4.2 PolyvPPTView

Courseware layout, responsible for synchronizing video time to load and display the corresponding courseware images

//Receive courseware loading progress
public void acceptProgress(int loadPPTProgress)
//Receive the callback from the courseware information listener
public void acceptPPTCallback(final PolyvVideoView videoView, String vid, boolean hasPPT, PolyvPptInfo pptvo)

4.3 PolyvPPTDirLayout

Courseware directory layout

//Receive the callback from the courseware information listener
public void acceptPPTCallback(PolyvVideoView videoView, String vid, boolean hasPPT, PolyvPptInfo pptvo)    

4.4 PolyvPPTErrorLayout

Layout displayed when courseware loading fails

//Receive the callback from the courseware information listener
public void acceptPPTCallback(PolyvVideoView videoView, String vid, boolean hasPPT, PolyvPptInfo pptvo)

5 Triple-Screen Download

When the SDK is upgraded to 2.10.0, if the video has PPT, the PPT will also be downloaded by default when downloading the video.

6 Reloading Courseware Information

The online interface for obtaining PPT information may fail to request, or the offline downloaded PPT may not be complete. In this case, it is necessary to re-obtain the PPT. For details, refer to the use of PolyvPPTRegainTask in the demo.

6.1 PolyvPPTRegainTask

Encapsulation class for reloading online/offline courseware information.

//Reload courseware information
public void regainPPT(String vid, Context context, OnPPTRegainLisnter lisnter, boolean isOnline)
//Stop the task
public void shutdown()