HarmonyOS webview有办法知道视频播放有没有全屏

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

当前在web里暂时不支持使用js或css来实现横屏,需要ArkUI的媒体查询接口实现横屏,可以在web的onFullScreenEnter和onFullScreenExit回调中监听是否点击全屏的按键,在这两个回调里使用媒体查询接口实现视频横向和竖向:参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

当网页视频横向后需要在H5中设置横向宽高来适配使页面全屏,媒体查询接口只是让手机横屏示例代码:

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: $rawfile('video.html'), 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%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 列表视频全屏播放实现
415浏览 • 1回复 待解决
HarmonyOS webview如何播放本地沙箱视频
1680浏览 • 1回复 待解决
HarmonyOS 有没有办法动态添加组件?
469浏览 • 1回复 待解决
求告知如何全屏播放一个视频
484浏览 • 1回复 待解决
有没有什么办法给组件新增方法?
749浏览 • 1回复 待解决
有没有视频列表框架?
220浏览 • 1回复 待解决
离线webview组件有没有相关使用文档
1644浏览 • 1回复 待解决
HarmonyOS Web全屏播放适配
247浏览 • 1回复 待解决