解决uniapp原生鸿蒙系统下app的web-view不能自动播放音视频

前提

通过uni-app开发并发布原生鸿蒙系统app时发现使用web-view打开的网页不能自动播放音视频,需要用户手动点击才能播放。

这个原因是在鸿蒙工程中web-view默认配置关闭了自动播放音视频(有很多配置和权限默认都是关闭了,在代码中配置,例如需要调用麦克风或摄像头,则需要配置,详情可查看华为鸿蒙相关文档)。

另一个原因是编译出来的鸿蒙工程中依赖的相关库中对web-view相关配置缺少相关配置导致。

解决方案

  1. 通过 HBuilderX 编译出新的鸿蒙工程

  2. 关闭 HBuilderX 运行的鸿蒙

  3. 修改编译出来的鸿蒙工程 工程路径/oh_modules/.ohpm/@dcloudio+uni-app-runtime@idazlhvgikh3aw++r+ncdsd8lhisx+iuufxvzpgrtyy=/oh_modules/@dcloudio/uni-app-runtime/src/main/ets/uni-mp-sdk/components/WebView.ets 文件,改为以下内容(如果新版的 @dcloudio+uni-app-runtime 库已经添加了就可以不用再添加)

...省略部分代码
  build() {
    Web({
      src: this.src,
      controller: this.controller
    })
	...省略部分代码
	// 添加以下设置
      .javaScriptAccess(true)
      // mediaPlayGestureAccess 需要设置为 false 默认是 true,如果是true 则需要用户点击才能播放音视频
      .mediaPlayGestureAccess(false)
  }
...省略部分代码
  1. 使用DevEco-Studio编译打包
### UniAppX iOS App 使用 WebView 方法教程 #### 创建 WebView 组件实例并初始化配置 在 UniAppX 中创建一个 WebView 实例,通常需要设置其基本属性以及指定加载的内容源。对于 iOS 平台而言,可以利用原生组件 `web-view` 来实现这一功能。 ```html <template> <view class="container"> <!-- uni-app 提供的 web-view 组件 --> <web-view :src="url"></web-view> </view> </template> <script> export default { data() { return { url: 'https://example.com' // 要加载网页URL地址 }; } }; </script> ``` 此代码片段展示了如何定义一个简单的 Vue.js 单文件组件,在其中引入了 `<web-view>` 标签用于展示外部网站内容[^1]。 #### 配置手势交互行为 为了增强用户体验,可能还需要调整 WebView 内部的手势操作逻辑,比如允许或禁用手势返回导航等功能。这可以通过修改应用 manifest 文件中的相应选项完成: ```json { "plus": { "distribute": {}, "nativeConfig": { "ios": { "popGesture": "hide" } } } } ``` 上述 JSON 片段说明了怎样通过编辑项目的配置文件来控制 WebView 的侧滑关闭特性,这里选择了隐藏该手势的效果[^3]。 #### 处理音频视频播放问题 考虑到某些情况下用户可能会希望即使应用程序退至后台也能继续收听音乐或是观看影片,因此有必要针对这种情况作出特别安排。一种解决方案是在检测到程序即将转入后台运行之前调用特定 JavaScript 函数停止多媒体资源的自动播放过程。 ```javascript // 在适当的地方监听页面可见状态变化事件 document.addEventListener('visibilitychange', function () { if (document.hidden) { // 当页面不可见时(即转为后台),执行暂停命令 document.querySelectorAll('video,audio').forEach(function (mediaElement) { mediaElement.pause(); }); } else { // 页面重新变为前台可视状态下恢复播放或其他处理... } }); ``` 这段脚本实现了监听页面能见度改变的状态,并据此决定是否应该中断正在播放的声音或影像流[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邓燎燕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值