IOS 设备 cover-view 无法覆盖 live-player
发布于 6 年前 作者 juanwei 7711 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

在 ios 设备上,在播放器右下角未展示全屏按钮(图片),如下图:

在 Android 设备上显示正常,如下图:

  • 预期表现

在 ios 和 android 设备上都可以正常展示全屏按钮。

  • 测试过程

1,在 cover-image 上绑定了 imgLoadError 和 imgLoadSuccess 方法检测按钮图片是否正常加载,结论是两个设备都提示图片加载成功,所以不是加载问题。

2,在代码中删除 live-player 相关代码之后,均可看到全屏按钮图片。

综上,怀疑是因为在 ios 设备上 cover-view 或者 cover-image 未完全覆盖在 live-player 原生组件之上导致此问题。

  • 相关代码:
<view class="live-container">
    <live-player class="live"
        id="live"
        src="{{ live.flv_stream }}"
        mode="live" 
        background-mute="true"
        bindstatechange="stateChange"
        bindfullscreenchange="fullScreenChange"
        binderror="error"
        bindtap="toggleToolBar"
    />
    <cover-view hidden="{{ !isFullScreen }}"
        bindtap="exitFullscreen"
        class="live-tool-bar-fullscreen">
        <cover-image
            class="fullscreen"
            mode="widthFix"
            src="../../static/icons/live_back_icon.png"
        />
    </cover-view>
    <cover-view style="display:{{ isFullScreen ? 'none' : 'block' }}"
        bindtap="fullscreen"
        class="live-tool-bar">
        <cover-image
            class="fullscreen"
            mode="widthFix"
            src="../../static/icons/fullscreen_icon.png"
        />
    </cover-view>
</view>

3 回复

敢问楼主找到原因了吗。我们也出现这个问题。太奇怪了。

你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

微信版本:6.7.2  机型:iPhone6s

代码片段: wechatide://minicode/lHsAblmP7A2V

此问题在模拟器上无法复现,只有在真机上才有此问题。且安卓上无此问题。代码片段貌似无法在手机上预览。

回到顶部