uni-app 调用plus.webview.currentWebview()相关接口时 video会自动暂停播放无法持续播放
uni-app 调用plus.webview.currentWebview()相关接口时 video会自动暂停播放无法持续播放
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| HBuilderX | 3.97 | 云端 |
产品分类：HTML5+
手机系统：iOS
手机系统版本号：iOS 17
手机厂商：苹果
手机机型：iphone13
打包方式：云端
示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="//ask.dcloud.net.cn/../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="//ask.dcloud.net.cn/../css/app.css" />-->
<style>
.mui-btn {
display: block;
width: 120px;
margin: 10px auto;
}
#info {
padding: 20px 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="" style="background-color: aqua;">
<video width="200" height="200" playsinline controls src="https://vod.crpa.cn/24c223fcvodgzp1253051363/5671fd613270835012493724781/tUXCLnwXG9UA.mp4"></video>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack: true //启用右滑关闭功能
});
setTimeout(function(){
plus.webview.currentWebview().parent()
},10000)
</script>
</body>
</html>操作步骤：
- 点击播放视频，10秒后会自动调用plus相关接口
预期结果：
- 调用plus相关接口时，不是暂停video
实际结果：
- 1
bug描述：
- 使用video标签播放视频时，如果调用了plus.webview.currentWebview()相关接口，则会触发video的暂停，无法播放
1 回复
在使用 uni-app 开发应用时，如果你在调用 plus.webview.currentWebview() 相关接口时遇到 video 组件自动暂停播放的问题，这通常是由于 WebView 的生命周期管理或页面重绘导致的。以下是一些可能的解决方案：
1. 使用 video 组件的 autoplay 属性
确保 video 组件的 autoplay 属性设置为 true，这样视频在页面加载时会自动播放。
<video autoplay controls src="your-video-url.mp4"></video>2. 使用 video 组件的 muted 属性
某些浏览器或 WebView 会阻止自动播放带有声音的视频。你可以将 video 组件的 muted 属性设置为 true，这样视频在自动播放时不会发出声音。
<video autoplay muted controls src="your-video-url.mp4"></video>3. 使用 video 组件的 loop 属性
如果你希望视频在播放结束后自动重新播放，可以将 loop 属性设置为 true。
<video autoplay loop controls src="your-video-url.mp4"></video>4. 使用 video 组件的 playsinline 属性
在某些移动设备上，视频可能会自动全屏播放。你可以使用 playsinline 属性来防止视频全屏播放。
<video autoplay playsinline controls src="your-video-url.mp4"></video>5. 使用 uni-app 的 onShow 生命周期钩子
如果你在页面切换或 WebView 重新加载时遇到视频暂停的问题，可以在 onShow 生命周期钩子中手动播放视频。
export default {
onShow() {
const video = this.$refs.video;
if (video) {
video.play();
}
}
}6. 避免频繁调用 plus.webview.currentWebview()
频繁调用 plus.webview.currentWebview() 可能会导致页面重绘，从而影响视频播放。如果你不需要频繁获取当前 WebView 对象，可以尽量减少调用次数。
7. 使用 uni-app 的 nvue 页面
如果你在 vue 页面中遇到视频播放问题，可以尝试使用 nvue 页面。nvue 页面使用原生渲染，可能在某些情况下表现更好。
8. 检查 WebView 的生命周期
确保在 WebView 的生命周期中正确处理视频播放。例如，在 WebView 隐藏或销毁时暂停视频，在 WebView 显示时恢复播放。
9. 使用 video 组件的 poster 属性
如果视频加载较慢，可以使用 poster 属性设置一个封面图，以提高用户体验。
<video autoplay controls poster="your-poster-image.jpg" src="your-video-url.mp4"></video>