web组件，引入的H5中视频标签点击全屏没有显示全屏，HarmonyOS 鸿蒙Next是否有办法解决？

web组件，引入的H5中视频标签点击全屏没有显示全屏，HarmonyOS 鸿蒙Next是否有办法解决？

web组件，引入的h5中有视频标签,点击浏览器的全屏按钮，视频没有进行旋屏全屏播放

2 回复

参考当前示例

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('t1.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%')
  }
}

html示例：

<!DOCTYPE html>
<html>
<head>
<title>浏览器全屏时横屏播放的demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}

video {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<video src="https://download.pingan.com.cn/mingyuanfund/2021_qinghuaci.mp4" autoplay controls></video>

<script type="text/javascript">
var video = document.querySelector('video');

// 进入全屏
function requestFullscreen() {
video.webkitRequestFullscreen();
return 1;
}

// 退出全屏
function exitFullscreen() {
document.webkitExitFullscreen();
return 0;
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {

// 进入全屏时，将视频旋转90度-->
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
} else {
// 退出全屏时，将视频旋转回来-->
video.style.transform = 'none';
video.style.width = '100%';
video.style.height = '100%';
}
});

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
if (document.fullscreenElement) {
// 窗口大小变化时，调整视频大小
video.style.width = '100vh';
video.style.height = '100vw';
}
});

// 点击播放按钮时，进入全屏
video.addEventListener('play', function() {
requestFullscreen();
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
});

// 点击退出按钮时，退出全屏
video.addEventListener('ended', function() {
exitFullscreen();
});
</script>
</body>
</html>

更多关于web组件，引入的H5中视频标签点击全屏没有显示全屏，HarmonyOS 鸿蒙Next是否有办法解决？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Web组件引入的H5页面中的视频标签点击全屏没有显示全屏的问题，可能是由于WebView的默认行为或系统权限限制导致的。鸿蒙Next的Web组件基于系统自带的WebView实现，可能存在对某些H5特性的支持不完全或兼容性问题。

要解决这个问题，可以通过以下方式进行处理：

  1. 检查WebView配置：确保WebView的配置允许全屏播放。可以通过设置WebSettings中的setMediaPlaybackRequiresUserGesture属性为false，以确保视频可以自动播放并支持全屏。

  2. 使用鸿蒙提供的API：鸿蒙Next提供了WebView组件的扩展API，可以通过WebView.setWebChromeClient来监听全屏事件，并手动处理全屏逻辑。例如，可以在onShowCustomView回调中实现自定义的全屏显示逻辑。

  3. 检查H5页面代码：确保H5页面中的视频标签和全屏相关的JavaScript代码正确实现。可以使用requestFullscreen API来触发全屏，并在鸿蒙Next中测试其兼容性。

  4. 系统权限：确保应用具备全屏播放的权限。可以在应用的config.json文件中添加相应的权限声明，如ohos.permission.FULL_SCREEN。

  5. 调试与日志：使用鸿蒙提供的调试工具和日志功能，检查WebView在全屏事件触发时的行为，定位问题根源。

通过以上步骤，可以在鸿蒙Next中解决Web组件引入的H5页面视频标签点击全屏没有显示全屏的问题。

回到顶部