鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

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

web是否能支持HTML5 的 FullScreen api

HarmonyOS

2024-05-07 22:05:11

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

一意孤行的

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>

回复

2024-05-08 15:59:48

如何写精华回答，获更多曝光？

发布

相关问题

Web中webview和H5交互

1099浏览 • 1回复待解决

HarmonyOS webview h5的localstorage

417浏览 • 1回复待解决

如何在webview中使用H5中的alert

1564浏览 • 1回复待解决

webview加载Vue h5失败

17814浏览 • 5回复待解决

HarmonyOS webview 怎么和H5交互

58浏览 • 1回复待解决

HarmonyOS web组件加载h5，h5拉起摄像头

589浏览 • 1回复待解决

H5中的图片在Web组件中显示异常

265浏览 • 1回复待解决

HarmonyOS h5webview下，如何让video视频自动播放？

329浏览 • 1回复待解决

用webview加载H5，是否存在安全相关的问题

1882浏览 • 1回复待解决

如何实现H5自定义事件

2364浏览 • 1回复待解决

HarmonyOS webview的H5页面里有个视频播放器，自带的全屏按钮，点了窗口大小没有完全全屏

64浏览 • 1回复待解决

HarmonyOS Webview里面可以获取到h5的window对象吗

68浏览 • 1回复待解决

应用中内置web如何实现与h5的交互传参？

198浏览 • 1回复待解决

HarmonyOS web.webview 嵌套H5(网页)相互通信

711浏览 • 1回复待解决

Web加载一个H5视频如何使其横向全屏播放

1328浏览 • 1回复待解决

在Web组件的H5页面中，如何使用a标签实现打开各种页面

2040浏览 • 1回复待解决

Video组件的自带全屏按钮如何实现点击全屏切换成横屏？

450浏览 • 1回复待解决

HarmonyOS原生中的web组件如何和组件内渲染的h5进行通信

480浏览 • 1回复待解决

HarmonyOS webview访问h5页面，底部出现遮盖

62浏览 • 1回复待解决

HarmonyOS web组件如何监听h5内部的router跳转

76浏览 • 1回复待解决

HarmonyOS webView加载本地H5资源页，cookie无法添加的问题

225浏览 • 1回复待解决

HarmonyOS h5和原生的交互，h5页面跳转很多层，是否支持拦截H5返回手势

61浏览 • 1回复待解决

Web组件和h5页面如何交互？

243浏览 • 1回复待解决

HarmonyOS H5如何访问相册？

284浏览 • 1回复待解决

HarmonyOS Webview如何监听滚动事件？H5如何直接调用拨打电话？

48浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

webview加载Vue h5失败 0回复

在HarmonyOS上实现ArkTS与H5的交互 0回复

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

轻松上手-Navigation路由 H5 0回复

H5通过url scheme拉起对应应用 0回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载