一、介紹

本篇Codelab將實作的內容
HarmonyOS是面向全場景多終端的分布式作業系統，使得應用程式的開發打破了智能終端互通的性能和資料壁壘，業務邏輯原子化開發，適配多端，通過一個簡單應用開發，體驗HarmonyOS的視頻播放能力

您將建立什么
在這個Codelab中，你將創建Demo Project，并將Demo編譯成Hap，此示例應用程式展示了如何播放視頻，

您將會學到什么

1. 如何創建一個HarmonyOS Demo Project
2. 如何構建一個Hap并且將其部署到智慧屏真機
3. 通過此示例應用體驗如何播放本地或者在線視頻

二、您需要什么

1. 硬體要求

作業系統：Windows10 64位
記憶體：8G及以上，
硬碟：100G及以上，
解析度：1280*800及以上

2. 軟體要求

需手動下載安裝，詳細步驟請參考《DevEco Studio使用指南》2.1.2
JDK：DevEco Studio自動安裝，
Node.js：請手動下載安裝，詳細步驟請參考《DevEco Studio使用指南》2.1.3 下載和安裝Node.js，
HarmonyOS SDK：待DevEco Studio安裝完成后，利用DevEco Studio來加載HarmonyOS SDK，詳細步驟請參考《DevEco Studio使用指南》2.1.6 加載HarmonyOS SDK，
Maven庫依賴包：如需手動拷貝和配置，詳細步驟請參考《DevEco Studio使用指南》2.3 離線方式配置Maven庫，

3. 需要的知識點

Java基礎開發能力，

三、能力接入準備

實作HarmonyOS應用開發，需要完成以下準備作業：

1. 環境準備，
2. 環境搭建，
3. 創建專案
4. 申請除錯證書
5. 應用開發

具體操作，請按照《DevEco Studio使用指南》中詳細說明來完成，
提示：需要通過注冊成開發者才能完成集成準備中的操作，

四、代碼片段

1. 布局：

創建播放視頻的Ability

public class VedioPlayAbilitySlice extends AbilitySlice implements SurfaceOps.Callback

布局截圖：

布局代碼：

//設定頁面背景透明
WindowManager windowManager = WindowManager.getInstance();
Window window = windowManager.getTopWindow().get();
window.setTransparent(true);

//頁面父布局 
DependentLayout myLayout = new DependentLayout(this);
DependentLayout.LayoutConfig params = new DependentLayout.LayoutConfig(MATCH_PARENT, MATCH_PARENT);
myLayout.setLayoutConfig(params);
//顯示視頻的自定義videoView
DependentLayout.LayoutConfig lpVideo = new DependentLayout.LayoutConfig(MATCH_PARENT, MATCH_PARENT);
videoView = new VideoView(this, this);
videoView.setHandler(handler);
myLayout.addComponent(videoView, lpVideo);

DependentLayout rlParent = new DependentLayout(this);
DependentLayout.LayoutConfig lpParent = new DependentLayout.LayoutConfig(MATCH_PARENT, WRAP_CONTENT);
lpParent.addRule(DependentLayout.ALIGN_PARENT_BOTTOM);
lpParent.leftMargin = ConvertUtils.dp2Px(40);
lpParent.rightMargin = ConvertUtils.dp2Px(40);
lpParent.bottomMargin = ConvertUtils.dp2Px(40);
myLayout.addComponent(rlParent, lpParent);
//顯示播放暫停按鈕
playBtn = new Image(this);
DependentLayout.LayoutConfig lpPlayBtn = new DependentLayout.LayoutConfig(ConvertUtils.dp2Px(40), ConvertUtils.dp2Px(40));
lpPlayBtn.addRule(DependentLayout.ALIGN_PARENT_RIGHT);
playBtn.setLayoutConfig(lpPlayBtn);
playBtn.setId(1112);
playBtn.setPixelMap(ResourceTable.Media_pause);
playBtn.setScaleType(Image.ScaleType.SCALE_TO_FULL);
playBtn.invalidate();
playBtn.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
    if (videoView.getPlayState() == VideoView.STATE_PLAYING) {
        videoView.pause();
        playBtn.setPixelMap(ResourceTable.Media_play);
    } else {
        videoView.start();
        playBtn.setPixelMap(ResourceTable.Media_pause);
    }
}
});
rlParent.addComponent(playBtn);
//顯示當前視頻播放時間
timePlay = new Text(this);
DependentLayout.LayoutConfig lpTimePlay = new DependentLayout.LayoutConfig(WRAP_CONTENT, WRAP_CONTENT);
lpTimePlay.addRule(DependentLayout.CENTER_VERTICAL);
timePlay.setLayoutConfig(lpTimePlay);
timePlay.setId(1111);
timePlay.setText("00:00/00:00");
timePlay.setTextSize(40);
timePlay.setTextColor(Color.WHITE);
rlParent.addComponent(timePlay);
// 顯示播放進度條
roundProgressBar = new ProgressBar(this);
roundProgressBar.setProgressWidth(ConvertUtils.dp2Px(5));
roundProgressBar.setProgressColor(Color.RED);
roundProgressBar.setMax(100);
roundProgressBar.setProgress(0);
DependentLayout.LayoutConfig lpProgressBar = new DependentLayout.LayoutConfig(MATCH_PARENT, ConvertUtils.dp2Px(40));
lpProgressBar.addRule(DependentLayout.RIGHT_OF, timePlay.getId());
lpProgressBar.leftMargin = ConvertUtils.dp2Px(20);
lpProgressBar.rightMargin = ConvertUtils.dp2Px(60);
rlParent.addComponent(roundProgressBar, lpProgressBar);

2. 自定義VideoView

繼承父類SurfaceProvider:

public class VideoView extends SurfaceProvider implements Player.IPlayerCallback

初始化：

public VideoView(Context context, SurfaceOps.Callback callback) {
super(context);
player = new Player(getContext());
player.setPlayerCallback(this);
Optional<SurfaceOps> surfaceHolderOptional = getSurfaceOps();
SurfaceOps surfaceHolder = surfaceHolderOptional.get();
surfaceHolder.addCallback(callback);
setZOrderOnTop(false);
state = STATE_INIT;
}

播放視頻
如果播放的是在線視頻，需要申請網路權限：

"reqPermissions": [
  {
    "name": "harmonyos.permission.INTERNET"
  }
]


public void playAssets(String fileName, boolean isLooping, SurfaceOps holder) {
    try {
//播放本地視頻：       //player.setSource(getContext().getResourceManager().getRawFileEntry(fileName).openRawFileDescriptor());
//播放在線視頻：
        player.setSource(new Source("https://media.w3.org/2010/05/sintel/trailer.mp4"));
        player.setVideoSurface(holder.getSurface());
        player.enableSingleLooping(isLooping);
        player.enableScreenOn(true);
        player.prepare();
        initPlayViewSize();
        player.play();
        if (state != STATE_INIT) {
            player.rewindTo(currentTime * 1000);
        }
        state = STATE_PLAYING;
        handler.sendEvent(InnerEvent.get(MESSAGE_UPDATE_PLAY_TIME));
    } catch (Exception e) {
        e.printStackTrace();
        Log.hiLog(e.toString());
    }
}

private void initPlayViewSize() {
    int videoWidth = player.getVideoWidth();
    int videoHeight = player.getVideoHeight();
    Log.hiLog("videoWidth:" + videoWidth + ", videoHeight:" + videoHeight);
    if (videoWidth < videoHeight) {
        double scale = screenHeight * 1.f / videoHeight;
        double currHeight = videoHeight * scale;
        double currWidth = videoWidth * scale;
        setHeight(((int) currHeight));
        setWidth(((int) currWidth));
    } else {
        double scale = screenWidth * 1.f / videoWidth;
        double currHeight = videoHeight * scale;
        double currWidth = videoWidth * scale;
        setHeight(((int) currHeight));
        setWidth(((int) currWidth));
    }
}

暫停：

public void pause() {
if (state == STATE_PLAYING) {
    player.pause();
    state = STATE_PAUSE;
}
}

在AbilitySlice啟動自動播放:

@Override
public void surfaceCreated(SurfaceOps surfaceOps) {
Log.hiLog("surfaceCreated");
videoView.playAssets("resources/rawfile/VID_20200613_204240.mp4", true, surfaceOps);
}

@Override
public void surfaceDestroyed(SurfaceOps surfaceOps) {
Log.hiLog("surfaceDestroyed");
videoView.stop();
}

3. 回應遙控器點擊

@Override
public boolean onKeyUp(int keyCode, KeyEvent keyEvent) {
    switch (keyCode) {
        case KeyEvent.KEY_DPAD_CENTER:
        case KeyEvent.KEY_ENTER:
            playBtn.performClick();
            return true;
        default:
                break;
    }
    return false;
}

4. 編譯運行該應用

通過hdc連接大屏設備
先查看智慧屏IP：

大屏設定->"網路與連接"->"網路"->"有線網路"

在cmd或者IDE的Terminal輸入命令：

hdc tconn 192.168.3.9:5555

運行hap

五、恭喜你

干得好，你已經成功完成了HarmonyOS應用開發E2E體驗，學到了：

1. 如何創建一個HarmonyOS Demo Project
2. 如何構建一個Hap并且將其部署到真機
3. 在HarmonyOS上如何使用HarmonyOS的視頻播放的能力

【如果您想學習HarmonyOS 應用開發基礎教程 請猛戳】