HarmonyOS 鸿蒙Next web加载带video标签的h5页面如何实现全屏化

HarmonyOS 鸿蒙Next web加载带video标签的h5页面如何实现全屏化 web加载H5页面 里面有个video标签

安卓的话需要WebChromeClient的onShowCustomView()和onHideCustomView()方法

来实现全屏播放和退出全屏播放的功能 我们鸿蒙需要做适配嘛

2 回复

可以参考如下demo：

import web_webview from '@ohos.web.webview'
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';
@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  @State portraitFunc:mediaquery.MediaQueryResult|void|null = null;
  handler: FullScreenExitHandler | null = null // 当设备横屏时条件成立
  listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
    if (mediaQueryResult.matches as boolean) {
      // 若设备为横屏状态，更改相应的页面布局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }
  aboutToAppear() {
    // 绑定当前应用实例
  // 绑定回调函数
  this.listener.on('change', (mediaQueryResult:mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) });
  }
  // 改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
    // 获取UIAbility实例的上下文信息
    let context:common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    // 调用该接口手动改变设备横竖屏状态
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) });
  }
  build() {
    Column() {
      Web({ src: '', controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onFullScreenEnter((event) => {
          console.log("onFullScreenEnter...")
          this.handler = event.handler
          this.changeOrientation(true);
        })
        .onFullScreenExit(() => {
          console.log("onFullScreenExit...")
          if (this.handler) {
            this.handler.exitFullScreen()
            this.changeOrientation(false);
          }
        })
    } .width('100%').height('100%') }
}

更多关于HarmonyOS 鸿蒙Next web加载带video标签的h5页面如何实现全屏化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，加载带有<video>标签的H5页面并实现全屏化，可以通过以下步骤实现：

  1. 使用<video>标签：在H5页面中嵌入<video>标签，并设置controls属性以显示视频控件。

    <video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

  2. 调用全屏API：通过JavaScript调用requestFullscreen方法来实现全屏。鸿蒙系统支持标准的Web API，因此可以使用以下代码：

    var videoElement = document.getElementById('myVideo');
if (videoElement.requestFullscreen) {
  videoElement.requestFullscreen();
} else if (videoElement.mozRequestFullScreen) { // Firefox
  videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
  videoElement.webkitRequestFullscreen();
} else if (videoElement.msRequestFullscreen) { // IE/Edge
  videoElement.msRequestFullscreen();
}

  3. 处理全屏事件：为了确保全屏操作的兼容性，可以监听全屏变化事件，并根据需要调整UI。

    document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
});

  4. 样式调整：在全屏模式下，可能需要调整视频元素的样式以适应全屏显示。可以通过CSS设置width: 100%和height: 100%来确保视频占满整个屏幕。

    video {
  width: 100%;
  height: 100%;
}

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现H5页面的<video>标签全屏化。

回到顶部