如何在鸿蒙系统中使用Video组件实现视频的全屏播放？

Question

如何在鸿蒙系统中使用Video组件实现视频的全屏播放？

李游Leo

6k1543

发布于
2024-12-12 北京

我在鸿蒙应用开发中，想要实现视频的全屏播放功能。请问Video组件是否支持全屏播放，能否提供一个详细的代码示例，展示如何实现全屏播放？

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

harmonyos-next

阅读 949

AI BotBETA

### 如何在鸿蒙系统中使用Video组件实现视频的全屏播放？

在鸿蒙系统中，Video组件确实支持全屏播放功能。你可以通过调整Video组件的布局参数和监听全屏事件来实现视频的全屏播放。以下是一个详细的代码示例，展示了如何实现这一功能：

1. **布局文件（XML）**：
   首先，在你的布局文件中添加一个Video组件。

<DirectionalLayout

   xmlns:ohos="http://schemas.huawei.com/res/ohos"
   ohos:width="match_parent"
   ohos:height="match_parent"
   ohos:orientation="vertical"
   ohos:alignment="center">

   <Video
       ohos:id="$+id:video_view"
       ohos:width="match_content"
       ohos:height="match_content"
       ohos:src="$media:sample_video" />

   <Button
       ohos:id="$+id:fullscreen_button"
       ohos:width="match_content"
       ohos:height="match_content"
       ohos:text="全屏" />

</DirectionalLayout>


2. **Java代码**：
然后，在你的Java代码中设置全屏按钮的点击事件监听器，并在其中处理全屏逻辑。

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Video;
import ohos.agp.window.WindowManager;
import ohos.bundle.IBundleManager;
import ohos.media.video.VideoPlayer;

public class MainAbility extends Ability {

   private Video videoView;
   private Button fullscreenButton;
   private boolean isFullScreen = false;

   @Override
   protected void onStart(Intent intent) {
       super.onStart(intent);
       super.setUIContent(ResourceTable.Layout_ability_main);

       videoView = (Video) findComponentById(ResourceTable.Id_video_view);
       fullscreenButton = (Button) findComponentById(ResourceTable.Id_fullscreen_button);

       fullscreenButton.setClickedListener(new Component.ClickedListener() {
           @Override
           public void onClick(Component component) {
               toggleFullScreen();
           }
       });
   }

   private void toggleFullScreen() {
       if (!isFullScreen) {
           enterFullScreen();
       } else {
           exitFullScreen();
       }
   }

   private void enterFullScreen() {
       WindowManager.LayoutConfig layoutConfig = getWindow().getAttributes();
       layoutConfig.width = WindowManager.LayoutConfig.MATCH_PARENT;
       layoutConfig.height = WindowManager.LayoutConfig.MATCH_PARENT;
       getWindow().setAttributes(layoutConfig);

       // Adjust Video component size to match the window
       DirectionalLayout.LayoutConfig videoLayoutConfig = new DirectionalLayout.LayoutConfig(
               DirectionalLayout.LayoutConfig.MATCH_PARENT,
               DirectionalLayout.LayoutConfig.MATCH_PARENT
       );
       videoView.setLayoutConfig(videoLayoutConfig);

       isFullScreen = true;
   }

   private void exitFullScreen() {
       WindowManager.LayoutConfig layoutConfig = getWindow().getAttributes();
       layoutConfig.width = getWindowManager().getDefaultDisplay().getWidth();
       layoutConfig.height = getWindowManager().getDefaultDisplay().getHeight();
       getWindow().setAttributes(layoutConfig);

       // Restore Video component size to original
       DirectionalLayout.LayoutConfig videoLayoutConfig = new DirectionalLayout.LayoutConfig(
               DirectionalLayout.LayoutConfig.MATCH_CONTENT,
               DirectionalLayout.LayoutConfig.MATCH_CONTENT
       );
       videoView.setLayoutConfig(videoLayoutConfig);

       isFullScreen = false;
   }

}


在这个示例中，我们创建了一个包含Video组件和Button组件的布局文件。通过点击按钮，我们可以切换视频的全屏状态。在Java代码中，我们实现了`toggleFullScreen`方法来处理全屏和退出全屏的逻辑，并调整Video组件的布局参数以适应全屏或恢复原始大小。

请注意，这个示例假设你已经有一个有效的视频文件（`sample_video`）在`resources/media/`目录下。

1 个回答

得票最新

以梦为马_HOS

1.2k1117

发布于
1 月 17 日广东

可以参考requestFullScreen接口：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...

撰写回答