1***@qq.com
1***@qq.com
  • 发布:2020-03-24 15:55
  • 更新:2020-03-24 15:55
  • 阅读:751

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

分类:uni-app

详细问题描述

(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]

2020-03-24 15:55 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复