【报Bug】多个video组件在退出全屏后悬浮在页面不动

详细问题描述

（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）

[内容]

重现步骤

[步骤]

1. 修改hello-uniapp项目视频组件页面的代码，多添加一个video组件
2. 播放视频1，播放视频2，全屏视频1
3. 退出全屏

[结果]
视频1会悬浮固定在视频1原本的位置，滚动页面没反应
[期望]
正常退出全屏，不悬浮固定不动

IDE运行环境说明

[HBuilderX]

[IDE版本号]2.5.1

[windows版本号]

[mac版本号]10.14.4

uni-app运行环境说明

[Xcode IOS 13.3]

[运行端版本号]iphone8

[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]HBuilderX

[编译模式说明：自定义组件模式？纯nvue模式？v3模式？]自定义组件模式

App运行环境说明

[Android版本号]

[iOS版本号]13.3

[手机型号]iphone8

[模拟器型号]11.3

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo">
<view>
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>
<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>
</view>
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO -->
<view class="uni-list uni-common-mt">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="uni-btn-v">
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
</view>
<view>111</view>
<view>111</view>
<view>111</view>
<view>111</view>
<view>111</view>
<view>111</view>
<view>111</view>
<!-- #endif -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'video',
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: '',
showVideo: false
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY || MP-TOUTIAO
this.videoContext = uni.createVideoContext('myVideo')
// #endif
// #ifdef APP-PLUS || MP-BAIDU
setTimeout(()=>{
this.showVideo = true
},350)
// #endif
// #ifndef APP-PLUS || MP-BAIDU
this.showVideo = true
// #endif
},
methods: {
sendDanmu: function() {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
videoErrorCallback: function(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
getRandomColor: function() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
}
</script>

<style>
video {
width: 690upx;
}
</style>

联系方式

[QQ]