1. 介紹

本篇Codelab將實現的內容

本篇Codelab旨在讓開發者了解手機HarmonyOS應用開發，常用布局、典型控件、FA組件、媒體-視頻、跨設備協同的體驗以及從工程創建到代碼和布局的編寫，再到編譯構建、部署和運行全過程。

您將構建一個基于HarmonyOSPlayer類實現的應用程序，該應用程序功能為播放本地視頻資源或從Internet獲得的視頻資源。效果圖如下：

您將會學到什么

●如何使用Player類播放視頻
●如何使用自定義控件來控制視頻播放
●如何添加并使用媒體事件的事件偵聽器和回調

硬件要求

●操作系統：Windows10 64位
●內存：8GB及以上
●硬盤：100GB及以上
●分辨率：1280*800像素及以上

軟件要求

●安裝Huawei DevEco Studio，詳情請參考下載和安裝軟件
●設置Huawei DevEco Studio開發環境，Huawei DevEco Studio開發環境需要依賴于網絡環境，需要連接上網絡才能確保工具的正常使用，可以根據如下兩種情況來配置開發環境
1.如果可以直接訪問Internet，只需進行下載HarmonyOS SDK操作
2.如果網絡不能直接訪問Internet，需要通過代理服務器才可以訪問，請參考配置開發環境

說明

如需要在手機中運行程序，則需要提前申請證書，如使用模擬器可忽略

●生成秘鑰和申請證書，詳情請參考準備簽名文件

技能要求

●具備DevEco Studio中創建、構建和運行應用經驗
●熟悉Ability和AbilitySlice生命周期及使用PA/FA的能力

2. 代碼結構

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們在參考提供下載方式。接下來我們會講解整個工程的代碼結構，如下圖：

●api：視頻播放狀態改變及屏幕狀態變化監聽。
●constant：定義視頻狀態、進度條和控制器狀態。

●factoty：創建SourceFactory類來根據視頻來源創建視頻源。
●manager：創建HmPlayerLifecycle來處理Player類的生命周期。
●view：創建PlayerLoading、SimplePlayerController類分別為視頻加載狀態及進度條控制類文件。
●HmPlayer：封裝播放器的主要功能方法。
●slice：創建MainAbilitySlice、SimplePlayerAbilitySlice分別為進入應用的主程序頁面和視頻播放頁面。
●utils：存放所有封裝好的公共方法，如DateUtils，LogUtils等。
●resources：存放工程使用到的資源文件，其中resourcesaselayout下存放xml布局文件；resourcesasemedia下存放視頻文件。
●config.json：Ability聲明及權限配置。

3. 創建視頻播放業務邏輯

該應用程序可播放的視頻格式包括mp4、mov、3gp、mkv，首先準備一份視頻文件并復制到"resources/base/layout/media"文件目錄。下面將會介紹視頻列表布局及播放邏輯。

創建視頻播放頁面文件及布局

Step 1 -創建simple_video_play_layout.xml布局文件展示視頻列表。

    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:id="$+id:parent" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
     

該布局文件有兩個id，parent是整個播放頁面的布局id,parent_layout是視頻畫面的布局id。

Step 2- 創建SimplePlayerAbilitySlice類，初次創建該頁面進行初始化。

@Override 
public void onStart(Intent intent) { 
    super.onStart(intent); 
    super.setUIContent(ResourceTable.Layout_simple_video_play_layout); 
    // 在Constants中定義視頻播放的起始位置 
    startMillisecond = intent.getIntParam(Constants.INTENT_STARTTIME_PARAM, 0); 
    // 初始化surface布局 
    initView(); 
    player.getLifecycle().onStart(); 
}

將預置的視頻資源初始化為url對象，并通過initView方法對視頻播放的控件進行初始化及賦值。

private String url = "entry/resources/base/media/gubeishuizhen.mp4"; 
private void initView() { 
    DependentLayout playerLayout = (DependentLayout) findComponentById(ResourceTable.Id_parent_layout); 
    player = new HmPlayer.Builder(this).setStartMillisecond(mStartMillisecond).setFilePath(url).create(); 
    playerLayout.addComponent(player.getPlayerView()); 
    player.play(); 
}

結束

創建HmPlayer

HmPlayer類是繼承自對HarmonyOS Player封裝的ImPlayer。如果您還不了解HarmonyOS Player，請參考視頻播放開發指導。

需要注意的是當頁面初始化Player類執行play方法時，視頻并沒有出現畫面。圖像渲染在屏幕上需要使用SurfaceProvider，該類控制surface的尺寸和格式，修改surface的像素，監視surface的變化等等。當底層顯示系統第一次創建surface之后會調用surfaceCreated(SurfaceOps surfaceOps)回調函數。HmPlayer中通過設置回調增加對視頻的播放開始或停止控制。

private SurfaceOps.Callback surfaceCallback = new SurfaceOps.Callback() { 
    @Override 
    public void surfaceCreated(SurfaceOps surfaceOps) { 
        // 標記surfaceView狀態 
        isSurfaceViewCreated = true; 
        surface = surfaceOps.getSurface(); 
        start(); 
    } 
  
    @Override 
    public void surfaceChanged(SurfaceOps surfaceOps, int i, int width, int height) { 
        LogUtil.info(TAG, "surfaceChanged i is " + i + ",width is " + width + ",height is " + height); 
    } 
  
    @Override 
    public void surfaceDestroyed(SurfaceOps surfaceOps) { 
        LogUtil.info(TAG, "surfaceDestroyed"); 
        isSurfaceViewCreated = false; 
    } 
};

surfaceView的初始化在HmPlayer構造函數中：
private HmPlayer(Builder builder) {

    ... 
    surfaceView = new SurfaceProvider(playerBuilder.mContext); 
    DependentLayout.LayoutConfig layoutConfig = new DependentLayout.LayoutConfig(); 
    layoutConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT); 
    // 設置surfaceView布局 
    surfaceView.setLayoutConfig(layoutConfig); 
    surfaceView.setVisibility(Component.VISIBLE); 
    surfaceView.setFocusable(Component.FOCUS_ENABLE); 
    surfaceView.setTouchFocusable(true); 
    surfaceView.requestFocus(); 
    // 設置surfaceView是否在最上方 
    surfaceView.pinToZTop(playerBuilder.isTopPlay); 
    surfaceView.getSurfaceOps().get().addCallback(surfaceCallback); 
}

在執行surfaceCreated回調時會執行HarmonyOS中Player的play方法。

private void start() { 
    if (isSurfaceViewCreated) { 
        threadPoolExecutor.execute(() -> { 
            player.setVideoSurface(surface); 
            player.prepare(); 
            if (playerBuilder.startMillisecond > 0) { 
                int microsecond = playerBuilder.startMillisecond * MICRO_MILLI_RATE; 
                player.rewindTo(microsecond); 
            } else { 
                player.play(); 
            } 
        }); 
    } 
}

編譯運行該應用程序

應用啟動后，視頻文件將被打開并開始播放，持續播放到最后。效果如下圖：

4. 創建視頻控制業務邏輯

上面的章節實現了視頻播放的基本功能，本小節將創建一個控制器，包含基本的媒體控制UI元素如播放、暫停、恢復、重新加載按鈕以及進度條。該控制器將與HmPlayer類一起提供一個基本功能全面且可操作的視頻播放器。

創建SimpleVideoPlayerController

SimplePlayerController類為自定義組件，包括控制視頻的播放、暫停、恢復以及進度條等控件。此處使用HarmonyOS EventHandler來進行UI更新，請參考HarmonyOS開發者文檔線程間通信。

public SimplePlayerController(Context context, ImplPlayer player) { 
    super(context); 
    this.context = context; 
    implPlayer = player; 
    // 創建子線程給自己發消息來及時更新UI 
    createHandler(); 
    initView(); 
    initListener(); 
}

其中initView方法初始化播放控制的控件。

Component playerController = LayoutScatter.getInstance(context).parse( 
        ResourceTable.Layout_simple_player_controller_layout, null, false); 
addComponent(playerController); 
if (playerController.findComponentById(ResourceTable.Id_play_controller) instanceof Image) { 
    // 播放或者暫停按鈕 
    playToogle = (Image) playerController.findComponentById(ResourceTable.Id_play_controller); 
} 
if (playerController.findComponentById(ResourceTable.Id_play_forward) instanceof Image) { 
    // 前進按鈕 
    imageForward = (Image) playerController.findComponentById(ResourceTable.Id_play_forward); 
} 
if (playerController.findComponentById(ResourceTable.Id_play_backward) instanceof Image) { 
    // 后退按鈕 
    imageBackward = (Image) playerController.findComponentById(ResourceTable.Id_play_backward); 
} 
if (playerController.findComponentById(ResourceTable.Id_progress) instanceof Slider) { 
    // 進度條 
    progressBar = (Slider) playerController.findComponentById(ResourceTable.Id_progress); 
}

initListener方法是對HmPlayer和播放控制器相互之間狀態變化的監聽處理。

implPlayer.addPlayerStatusCallback(statusChangeListener);

添加HmPlayer狀態變化的監聽，例如當視頻播放完畢時，回調StatusChangeListener的statusCallback來刷新對控制器中各種組件的狀態和顯示值。HmPlayer中HmPlayerCallback中通過底層播放回調onPlayBackComplete來對界面視頻狀態進行更改。

@Override

public void onPlayBackComplete() { 
    for (StatusChangeListener callback : statusChangeCallbacks) { 
        status = PlayerStatus.COMPLETE; 
        callback.statusCallback(PlayerStatus.COMPLETE); 
    } 
    stop(); 
}

在SimplePlayerController的statusCallback中更新控制按鈕狀態。

if (status == PlayerStatus.STOP || status == PlayerStatus.COMPLETE) {

    controllerHandler.sendEvent(Constants.PLAYER_PROGRESS_RUNNING, EventHandler.Priority.IMMEDIATE); 
    playToogle.setPixelMap(ResourceTable.Media_ic_update); 
    progressBar.setEnabled(false); 
}

此時播放按鈕更新成待刷新圖標，進度條不可拖拽。

創建PlayerLoading

在視頻畫面緩沖沒有完成時，播放界面如果提供加載進度信息，用戶體驗更好。創建的PlayerLoading類設置一個布局并且添加StatusChangeListener監聽回調，使得該控件可以根據狀態顯示或隱藏。

public PlayerLoading(Context context, ImplPlayer player) {

    super(context); 
    this.player = player; 
    initView(context); 
    initListener(); 
} 
private void initListener() { 
    player.addPlayerStatusCallback(new StatusChangeListener() { 
        @Override 
        public void statusCallback(PlayerStatus status) { 
            //獲取主線程更新UI 
            mContext.getUITaskDispatcher().delayDispatch( 
                    new Runnable() { 
                        @Override 
                        public void run() { 
                            if (status == PlayerStatus.PREPARING || status == PlayerStatus.BUFFERING) { 
                                show(); 
                            } else if (status == PlayerStatus.PLAY) { 
                                hide(); 
                            } else { 
                                LogUtil.info(PlayerLoading.class.getName(), "statuCallback else message"); 
                            } 
                        } 
                    }, 0); 
        } 
    }); 
}

編譯運行該應用程序

經過上面的步驟，此時運行程序就可以看到一個有前進、后退、播放、暫停的界面，用戶可以自主控制該視頻播放，效果如下圖：

編輯：hfy