小程序内富文本中显示的video组件层级过高,遮盖其他组件怎么办?

发布于 2022-09-11 19:25:10 字数 1677 浏览 12 评论 0

小程序中,利用富文本展示出文本内容,文本内容包含视频组件,由于视频组件是原生组件,导致他的层级最高,现在问题是,他所在的地方,把其他的组件都覆盖了,而且无法改变video的层级,请问该怎么办?
以下是相关代码

未渲染数据的代码
<view class='paratext'>
     <import src="../../html2wxml-template/html2wxml.wxml" />
     <template is="html2wxml" data="{{wxmlData:article}}" />
</view>



已渲染数据的代码
<viewclass="paratext"role=""aria-label="">
    <viewclass="html2wxml"role=""aria-label="">
        <viewclass="wxml-p wxml-block"role=""aria-label="">
            <text></text>
        </view>
        <view class="ql-video wxml-video"role=""aria-label="">
            <video class="ql-video"controls=""poster=""src="https://sinke-cdn.xiaocx.org/Fif7fLeMtIC9GcqK31fPsdoMtuQp">
            00:00
            </video>
        </view>
        <viewclass="wxml-p wxml-block"role=""aria-label="">
            <imagebindload="wxmlImgLoad"bindtap="wxmlImgTap"class="wxml-img"data-from="article"data-idx="0"data-src="https://sinke-cdn.xiaocx.org/Fnq9cUS8Gd1-QBS10WhEIytlVkzE"mode="widthFix"src="https://sinke-cdn.xiaocx.org/Fnq9cUS8Gd1-QBS10WhEIytlVkzE"style="width: 352px; height: 234.375px;"></image>
            <imagebindload="wxmlImgLoad"bindtap="wxmlImgTap"class="wxml-img"data-from="article"data-idx="1"data-src="https://sifenke-cdn.xiaocx.org/Fn50f5nyIvJHlJTk1DZ5LKlKJYHj"mode="widthFix"src="https://sifenke-cdn.xiaocx.org/Fn50f5nyIvJHlJTk1DZ5LKlKJYHj"style="width: 365px; height: 197.388px;"></image>
        </view>
    </view>
</view>

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

慵挽 2022-09-18 19:25:10

一种办法是在弹窗唤起的时候把video隐藏,换成一张和video一样大的图片,另一种方法是把要盖在视频上方的元素用cover-view标签或cover-image标签,他们层级比原生组件高,但可能有些css属性不能用,并且cover-view中只能嵌套<cover-view> <cover-image> <button> <navigator> <official-account>,其他的都会被忽略

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文