Closed soobin1104 closed 2 months ago
请在此描述你的问题 直播和视频播放场景,弹幕div子绝父相盖在直播画面div上面,层级999,使用danmus数组没有问题,但是使用slot插槽自定义弹幕样式 会出现画面突然变暗一下,弹幕飘完之后就变亮回来,我用的是imac开发,亮度高看得出来,windows系统1080P的屏幕,如果把窗口左侧边缘放在白色背景上可以看到边缘黑色在闪,经排查发现,如果slot插槽不用div和flex布局,全部使用span元素就不会出现这个问题,但是span元素布局不方便,希望修复,排查了一下午
在此附上你遇到问题的代码或代码截图。
<div class="danmakuBox"> <vue-danmaku :danmus="[]" :speeds="120" :use-slot="true" :top="12" ref="danmakuRef" :fontSize="20" extraStyle="font-weight:bold;font-family:微软雅黑, PingFang SC, San Francisco;-webkit-text-stroke: 1px #202020;" :channels="6" > <template #dm="{ danmu }"> <!-- 特别处理讲师的弹幕 --> <span v-if="danmu.userType === 1"> <span class="tag-teacher">{{ danmu.actor }}</span> {{ danmu.nickName }} : <CustomText style="font-size: 18px" :text="danmu.text" /> </span> <span v-else-if="danmu.userType === 2"> <span class="tag-assistant">{{ danmu.actor }}</span> {{ danmu.nickName }} : <CustomText style="font-size: 18px" :text="danmu.text" /> </span> <!-- 处理普通弹幕 --> <CustomText style="font-size: 18px" v-else :text="danmu" /> </template> </vue-danmaku> </div>
https://github.com/hellodigua/vue-danmaku/assets/169176487/4635e5db-2035-48f9-a33c-4252d5979bc8
截图里面一开始用了span,如果改成div或者加上flex布局就会出现,很容易复现,直播用的腾讯播放器,可以用这个播放器播放一个白色背景视频,弹幕div盖在上面
复现的视频,压缩了一下,还是可以看得出来画面变暗了一下
https://github.com/hellodigua/vue-danmaku/assets/169176487/3fc8527f-61da-4bdc-bea6-2fa7f3fa0e4f
复现困难,之后有人再遇到了再说吧
问题
请在此描述你的问题 直播和视频播放场景,弹幕div子绝父相盖在直播画面div上面,层级999,使用danmus数组没有问题,但是使用slot插槽自定义弹幕样式 会出现画面突然变暗一下,弹幕飘完之后就变亮回来,我用的是imac开发,亮度高看得出来,windows系统1080P的屏幕,如果把窗口左侧边缘放在白色背景上可以看到边缘黑色在闪,经排查发现,如果slot插槽不用div和flex布局,全部使用span元素就不会出现这个问题,但是span元素布局不方便,希望修复,排查了一下午
代码实现
在此附上你遇到问题的代码或代码截图。
https://github.com/hellodigua/vue-danmaku/assets/169176487/4635e5db-2035-48f9-a33c-4252d5979bc8
截图里面一开始用了span,如果改成div或者加上flex布局就会出现,很容易复现,直播用的腾讯播放器,可以用这个播放器播放一个白色背景视频,弹幕div盖在上面
复现的视频,压缩了一下,还是可以看得出来画面变暗了一下
https://github.com/hellodigua/vue-danmaku/assets/169176487/3fc8527f-61da-4bdc-bea6-2fa7f3fa0e4f
环境