鸿蒙应用框架开发【画中画效果实现】 UI框架

画中画效果实现

介绍

本示例通过@kit.ArkUI、@kit.MediaKit等接口，实现了视频播放、手动和自动拉起画中画、画中画窗口控制视频播放和暂停等功能。

效果预览

使用说明

1. 在主界面，可以点击对应视频按钮进入视频播放页面；
2. 视频播放页面点击开启，应用拉起画中画，点击关闭，关闭画中画；
3. 视频播放页面点击自动开启画中画，在返回桌面时会自动拉起画中画；
4. 视频播放页面会显示一些回调信息。

具体实现

• 整个示例用Navigation构建页面，主页面放置五个可点击视频框，点击之后进入视频播放页面。
• 进入视频播放页面后，有三块区域，最上方的XComponent，中间的画中画控制按钮以及下方的回调信息显示框。
• 点击开启后，应用手动拉起画中画，视频在画中画播放，返回桌面视频依旧画中画播放；点击关闭后，画中画播放的视频返回XComponent播放，同时返回桌面不会拉起画中画。
• 点击自动拉起画中画后，返回桌面时应用自动拉起画中画，视频画中画播放。
• 在播放页面进行画中画播放时，XComponent框会提示当前视频正在以画中画播放。
• 回调信息显示框会显示当前状态，错误原因以及按钮事件和状态，参考：[VideoPlay.ets]。

/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { PiPWindow } from '@kit.ArkUI';
import { JSON } from '@kit.ArkTS';
import { Constants } from '../constants/Constants';
import { AVPlayer } from './AVPlayer';
import Logger from '../utils/Logger';

const TAG = Constants.NAV_DESTINATION_NAME;

@Extend(Text)
function textType() {
  .padding({ left: $r('app.integer.other_padding') })
  .fontWeight(FontWeight.Bold)
  .fontSize($r('app.integer.text_size'))
  .alignSelf(ItemAlign.Start)
}

@Extend(Text)
function msgType() {
  .padding({ left: $r('app.integer.other_padding') })
  .fontSize($r('app.integer.text_size'))
  .fontColor($r('app.color.Message_color'))
  .alignSelf(ItemAlign.Start)
}

@Component
export struct PlayVideo