HarmonyOS webView视频横屏展示

webView中播放的视频想要横屏播放,原生需要如何支持才能让webView中的视频横屏

HarmonyOS
2024-12-25 15:25:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

1、当前在web里暂时不支持使用js或css来实现横屏,需要ArkUI的媒体查询接口实现横屏,可以在web的onFullScreenEnter和onFullScreenExit回调中监听是否点击全屏的按键,在这两个回调里使用媒体查询接口实现视频横向和竖向:

参考链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-media-query-V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onfullscreenenter9

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#onfullscreenexit9

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

2、ArkWeb基于chromium,支持FullScreen等w3c标准,参考代码如下:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  </head>
  <div id="container">
  <button onclick="fullScreen()">全屏</button>
  <video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="https://xxx.mp4"></source>
  </video>
  </div>

  <script>

  function fullScreen() {
    var elem = document.getElementById("myvideo");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    }
  }
  </script>

  <style>
#myvideo {
  width: 80%;
  height: 50%
}

</style>
分享
微博
QQ
微信
回复
2024-12-25 17:46:43
相关问题
HarmonyOS 怎么设置某个 page 展示
916浏览 • 1回复 待解决
HarmonyOS web内加载的视频如何全屏
1188浏览 • 1回复 待解决
HarmonyOS 播放问题
2448浏览 • 1回复 待解决
HarmonyOS 后布局问题
1762浏览 • 1回复 待解决
HarmonyOS video如何播放?
1308浏览 • 1回复 待解决
HarmonyOS 查询当前状态是还是竖
1810浏览 • 1回复 待解决
HarmonyOS Canvas后定位问题
864浏览 • 1回复 待解决
HarmonyOS 相机旋转拍照问题
1343浏览 • 1回复 待解决
HarmonyOS 如何让app支持
1778浏览 • 1回复 待解决
openharmony jsFA 如何显示?
8516浏览 • 1回复 待解决