在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放

H5页面中的视频不会自动播放

问题现象

ArkWeb(方舟Web)提供了Web组件,用于在应用程序中显示Web页面内容。当应用加载完有视频内容的H5页面时,不会自动播放视频。

背景知识

  • ArkWeb提供了Web组件,Web组件为开发者提供了丰富的控制Web页面能力。
  • onPageBegin网页开始加载时触发该回调,且只在主frame触发,iframe或者frameset的内容加载时不会触发此回调。
  • runJavaScript异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。
  • mediaPlayGestureAccess方法实现自动播放音视频,默认情况下,设置有声视频播放是否需要用户手动点击,静音视频播放不受该接口管控。如果需要让音视频自动播放,需要将mediaPlayGestureAccess中的参数设置为false。

问题定位

排查代码,在Web组件的onPageBegin方法中未添加对暂停和播放状态的判断,也没有调用mediaPlayGestureAccess方法,并未将参数设置为false。

ArkTS 复制代码
...
Web.create({
    controller: this.webviewController,
    src:this.url
});
Web.darkMode(WebDarkMode.Off);
Web.domStoreageAccess(true);
Web.zoomAccess(true);
Web.javaScriptAccess(true);
Web.mixedMode(MixedMode.All);
Web.cacheMode(cacheMode.None);
Web.onPageBegin(($a3)=>{
    if ($a3) {
        this.loading = false;
        this.onPageBegin($a3.url);
    }
});
...

分析结论

使用Web组件时,在onPageBegin方法中未对视频进行暂停和播放的判断,并将mediaPlayGestureAccess设置为false,导致Web页面中的视频无法自动播放。

修改建议

H5页视频不能自动播放,可以在onPageBegin方法中对视频进行暂停和播放的判断,把mediaPlayGestureAccess设置false就可以自动播放视频了。

ArkTS 复制代码
@State boo: boolean = false;


 Web({
      src: 'https://hqtime.huanqiu.com/article/4EPT4ScnmUR?app=1&ver=1&recommend_image=1&fontSize=normal&isFlat=false&recommend=1',
      controller: this.controller
    })
      .onPageBegin(() => {      
        if (this.boo) { 
        // 为false时,走else自动播放
          this.controller.runJavaScript("window.onload = function() {document.querySelector('video').addEventListener('play', function(event) {event.preventDefault();this.pause();});}")
        } else {
          this.controller.runJavaScript("window.onload = function() {document.querySelector('video').play()}")
        }  
      })
      // 默认不自动播放为true,自动播放为false
      .mediaPlayGestureAccess(this.boo)
      .layoutWeight(1)
      .mixedMode(MixedMode.All)
      .domStorageAccess(true);

背景: 由于在做项目的过程中发现web中的视频不会自动播放,就来查阅资料,发现了 mediaPlayGestureAccess (默认为true), 只用把该属性设置为 false, 就可以了

详情参考属性 mediaPlayGestureAccess

来源: H5页面中的视频不会自动播放


End

相关推荐
前端世界2 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~4 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
iMerryou5 小时前
鸿蒙的动态渐变背景实现
harmonyos
yjm7 小时前
从一例 Lottie OOM 线上事故读源码
android·app
HMS Core12 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
人工智能·游戏·harmonyos
儿歌八万首12 小时前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
dilvx12 小时前
配置鸿蒙 fastboot
华为·harmonyos
儿歌八万首12 小时前
HarmonyOS 中状态管理 V2和 V1 的区别
harmonyos·component·arkui
鸿蒙小林12 小时前
HarmonyOS应用开发者高级试题2025年7月部分单选题
harmonyos·开发者认证