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;
+ }