z***@163.com
z***@163.com
  • 发布:2019-08-01 14:16
  • 更新:2020-03-13 10:29
  • 阅读:6606

【报Bug】uni-app的video组件播放视频,安卓手机显示异常

分类:uni-app

详细问题描述

uni-app的video组件播放视频时安卓手机显示异常,表现为视频虽然在播放,但是加载的转圈的动画不会自动消失(可以看下面结果部分的截图),苹果手机没这个问题
[内容]

重现步骤

[步骤]

  1. 代码在附件部分提供,所使用的开发环境会在后面详细描述
  2. 将我提供的代码,放入HBuild X中,然后点击--》发行--》小程序-微信
  3. 等待小程序开发者工具被唤起,微信开发者工具被唤起以后,点击微信开发工具的预览按钮,等待生成二维码
  4. 使用安卓手机去扫描生成的二维码,唤起小程序
  5. 注意一定要使用使用安卓手机去扫微信开发者工具生成的二维码,苹果手机没有这个问题,而且我这个视频连接只有真机才可以播放,微信开发者工具中是不能播放的

[结果]
安卓手机会出现视频已经播放,但是视频加载的那个动画依然存在,没有主动消失,如下图


[期望]
安卓手机一旦视频开发播放,加载动画应该自动消失

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地址]

2019-08-01 14:16 负责人:无 分享
已邀请:
x***@126.com

x***@126.com - web前端开发 Q:282310962

运用vue+uniapp开发仿抖音短视频|小视频效果
https://blog.csdn.net/yanxinyun1990/article/details/103012086

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