视屏上加输入框怎么解决的?
发布于 6 年前 作者 laixiuying 7370 次浏览 来自 问答

视频上面添加输入框,弹幕的效果

2 回复

input是原生组件,层级最高;video目前是同层渲染,可以正常设置层级,请知悉

视频类的组件 <live-player>、<video>,属于原生组件;

如果要在这类原生组件上方显示元素,需要用到 <cover-view> 或 <cover-image> 组件;同时,<cover-view>内只可嵌套<cover-view>、<cover-image> 和 <button>;

鉴于上面的规则,输入框的实现可以参考下面步骤:

1、页面内添加不可见的<input>

2、在视频上方使用 <cover-view> 实现输入框显示效果,点击获取 <input> 焦点,并在 <cover-view> 添加 <input> 输入的字符

弹幕同理,但需要额外添加动画效果和位置计算

回到顶部