请问webview中h5的video组件如何实现全屏

web是否能支持HTML5 的 FullScreen api

HarmonyOS
2024-05-07 22:05:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
lilyglp

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

参考链接:

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

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__onfullscreenenter9

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__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://static.foodtalks.cn/video/post/1f9d800c9cbe3088a8c2407de1ff8baac09d.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-05-08 15:59:48
相关问题
webview加载Vue h5失败
15695浏览 • 5回复 待解决
如何实现H5自定义事件
437浏览 • 1回复 待解决
如何加载字符串形式H5数据
307浏览 • 1回复 待解决
H5页面如何与ArkTS交互
837浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
5225浏览 • 1回复 待解决
如何调试H5代码,有人知道吗?
123浏览 • 1回复 待解决
Web能直接加载h5代码吗?
1256浏览 • 2回复 待解决
如何移除页面上Video组件
276浏览 • 1回复 待解决
升级API11后h5页面字体变小了
166浏览 • 1回复 待解决
如何判断Web组件是否全屏
368浏览 • 1回复 待解决
ArkTS怎么完全屏蔽具体实现
182浏览 • 1回复 待解决
请问下鸿蒙webview如何设置请求头?
4416浏览 • 1回复 待解决