HarmonyOS 鸿蒙Next web组件解析富文本里的视频

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next web组件解析富文本里的视频 web组件解析富文本里有视频，视频可以正常播放，但是点击全屏后，页面被拉长，没有像web打开url地址的效果，请问如何处理

Harmonyos Next教程
2 回复

下面demo可供参考，可以运行看下效果是否满足需求。

//index.ets
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() {
      Text('标题').width('100%')
      Scroll() {
        Column() {
          Text('标题2222').width('100%').height(100).backgroundColor(Color.Gray)
          Column() {
            Text('标题3333').width('100%').height(200).backgroundColor(Color.Pink)
            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);
                  }
                })
            Text('标题4444').width('100%').height(300).backgroundColor(Color.Yellow)
          }
        }
      .scrollBar(BarState.Off)
      .layoutWeight(1)
      Text('底部').width('100%')
    }
  .width('100%').height('100%')
  }
}

<!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="http://rmt-data.hinews.cn/rmh/vid/VID_2ac9beb244204108ac1ee0809d9444ed.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>

更多关于HarmonyOS 鸿蒙Next web组件解析富文本里的视频的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next web组件解析富文本里的视频”的问题，以下是专业且直接的回答：

在HarmonyOS鸿蒙Next web组件中，解析富文本里的视频通常涉及以下几个步骤：

  1. 富文本解析：首先，系统会对富文本内容进行解析，识别出其中的视频标签或特定格式的视频链接。这一步骤依赖于鸿蒙系统内置的富文本解析器或开发者自定义的解析逻辑。

  2. 视频元素提取：解析完成后，系统会提取出富文本中的视频元素，包括视频链接、封面图、播放时长等关键信息。

  3. 视频组件渲染：提取出的视频元素会被传递给鸿蒙Next web组件中的视频播放器组件。该组件负责根据视频信息渲染出相应的播放界面，并提供播放、暂停、进度条等交互功能。

  4. 视频播放控制：用户可以通过视频播放器组件提供的交互界面控制视频的播放，如点击播放按钮开始播放视频，拖动进度条调整播放进度等。

如果开发者在解析富文本视频时遇到具体问题，可能是由于富文本格式不兼容、视频链接无效或视频播放器组件配置错误等原因。建议检查富文本格式、视频链接的有效性以及视频播放器组件的配置是否正确。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部