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