diff --git a/pages/component/video/video.uvue b/pages/component/video/video.uvue index a4ca8e70a05bd52d05634102fbcaaa8f90bdcb9a..2c5dc0773f837a5276a58dfc635d77ef5c77faf3 100644 --- a/pages/component/video/video.uvue +++ b/pages/component/video/video.uvue @@ -15,6 +15,9 @@ src="../../../static/test-video/fast-backward.png" @tap="fastBackward"> + @@ -25,7 +28,7 @@ - 子组件实现快进、快退功能(全屏后显示) + 子组件实现快进、快退、发送弹幕功能(全屏后显示) @@ -276,6 +279,23 @@ if (pos > this.endPos) pos = this.endPos; this.seek(pos); }, + onSendDanmuConfirm: function (event : UniInputConfirmEvent) { + this.videoContext?.sendDanmu({ + text: event.detail.value, + color: '#ff0000' + } as Danmu); + }, + onSendDanmuKeyboardHeightChange: function (event : UniInputKeyboardHeightChangeEvent) { + const element = uni.getElementById('input-send-danmu') as UniElement; + if (event.detail.height.toInt() == 0) { + element.style.setProperty('bottom', '50px'); + } else { + element.style.setProperty('bottom', event.detail.height + element.getBoundingClientRect().height); + } + }, + onSendDanmuBlur: function (_ : UniInputBlurEvent) { + (uni.getElementById('input-send-danmu') as UniElement).style.setProperty('bottom', '50px'); + }, // 属性 onSrcComfirm: function (event : UniInputConfirmEvent) { let value = event.detail.value; @@ -575,4 +595,14 @@ transform: translate(50%, -50%); position: absolute; } + + .input-send-danmu { + height: 40px; + padding: 8px 13px; + margin: 0 var(--status-bar-height); + bottom: 50px; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + color: #FFF; + }