详细问题描述
uni-app的video组件播放视频时安卓手机显示异常,表现为视频虽然在播放,但是加载的转圈的动画不会自动消失(可以看下面结果部分的截图),苹果手机没这个问题
[内容]
重现步骤
[步骤]
- 代码在附件部分提供,所使用的开发环境会在后面详细描述
- 将我提供的代码,放入HBuild X中,然后点击--》发行--》小程序-微信
- 等待小程序开发者工具被唤起,微信开发者工具被唤起以后,点击微信开发工具的预览按钮,等待生成二维码
- 使用安卓手机去扫描生成的二维码,唤起小程序
- 注意一定要使用使用安卓手机去扫微信开发者工具生成的二维码,苹果手机没有这个问题,而且我这个视频连接只有真机才可以播放,微信开发者工具中是不能播放的
[结果]
安卓手机会出现视频已经播放,但是视频加载的那个动画依然存在,没有主动消失,如下图
[期望]
安卓手机一旦视频开发播放,加载动画应该自动消失
IDE运行环境说明
[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX 版本2.1.3.20190723
[IDE版本号]
微信开发者工具版本号 稳定版 Stable Build (1.02.1907160)
[windows版本号]
win10系统
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序?]
运行的是微信小程序
[运行端版本号]
微信开发者工具使用的调试基础库是2.7.0
微信的版本号是7.0.5
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
项目是使用HBuilderX创建的
[编译模式是老模板模式还是新的自定义组件模式?]
编译模式是老模式
App运行环境说明
[Android版本号]
[iOS版本号]
[手机型号]
小米MAX
[模拟器型号]
附件
[uni-app中的代码示例]
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<video id="myVideo" src="http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<!-- #ifndef MP-ALIPAY -->
<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>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
},
methods: {
sendDanmu: function() {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
videoErrorCallback: function(e) {
console.log('============播放错误======')
console.log(e)
},
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>
[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]
[App安装包或H5地址]