修复 HTML 视频元素的黑色矩形

2023-12-29

我正在实施 WebRTC 视频聊天。我想实现以下案例:

默认情况下,视频元素通过 CSS 具有背景图像,如果没有视频输入,则用户会看到他(或对话者)的头像:

No video expected result: No video expected result

No video actual result: No video actual result

正如您从屏幕截图中看到的,我的精美背景上方有黑色矩形。我想让这个丑陋的黑色矩形透明并保持视频背景可见。

实际上,在不引入任何额外标记的情况下解决问题会很棒。

感谢您的帮助=)

Update:

“无视频”意味着用户没有网络摄像头并且流只有音轨。


Bingo!

Reading 文档 http://www.w3schools.com/tags/tag_video.asp深入给出了一些结果 =) 就这么简单:

<video poster="image.jpg">

一个简单的属性让我很高兴

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

修复 HTML 视频元素的黑色矩形 的相关文章

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 来自 HTML5 的 Phonegap Bonjour/Zeroconf 或 Websocket IP 发现

    我正在尝试实现一个 Phonegap HTML5 应用程序 该应用程序连接到 Websocket 服务器 在嵌入式设备中运行 也有 Bonjour 服务 以在家庭网络内交换数据 我想知道使用 Phonegap 检测服务器 IP 的最佳方法
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 如何在 Go 中逐字符读取文件

    我有一些大的 json 文件想要解析 并且我想避免一次将所有数据加载到内存中 我想要一个函数 循环 它可以一次返回每个字符一个 I found 这个例子 http golangcookbook com chapters strings pr
  • 单元测试快速路由调用控制器方法?

    我看到一些类似的问题 https stackoverflow com questions 9517880 how does one unit test routes with express 但我的设置略有不同 我无法找出测试它的好方法 我
  • OS X 上的直接排序错误

    在 OS X 10 5 Emacs 23 2 上 在 dired 模式下 如果我尝试排序dired sort toggle or edit带前缀参数 sort extension or X 我得到 insert directory List
  • 如何在 cassandra cql 中对 2 个或更多表进行联接查询

    我是卡桑德拉的新手 这里我有两张桌子EVENTS and TOWER 我需要加入这些来进行一些查询 但我没有能力做到这一点 结构EVENTS table eid int PRIMARY KEY a end tow id text a hom
  • Android Studio Designer 显示小部件和片段的方式与我的手机不同

    我在 Android Studio 设计器和手机中显示项目时遇到问题 第一个问题是小部件和片段在设计器 模拟器中的显示与在我的手机上的显示不同 我尝试降低设计器中的分辨率来测试其他设备分辨率 但尽管分辨率相对相同 但它在我的手机上的显示效果
  • 德尔福 UUID 生成器

    Delphi 有内置的东西来生成 UUID 吗 program Guid APPTYPE CONSOLE uses SysUtils var Uid TGuid Result HResult begin Result CreateGuid
  • 如何从 Flash 中的 MovieClips 获取多边形?

    我有一个动作脚本 可以读取 swf 并浏览其中的影片剪辑 影片剪辑应该是简单的形状 我想将这些影片剪辑中的数据转换为多边形 换句话说 我想要一系列代表影片剪辑上的形状的坐标 没有简单的方法可以做到这一点 将形状绘制到舞台上后 您可以访问的唯
  • OSX/Linux,减慢终端的输出[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我正在打印一个长文本文件 该文件在屏幕上滚动得非常快 有没有办法减慢滚动速度 换句话说 是否有一个系统设置可以控制输出显示到屏幕上的速度 OSX Li
  • 如何解析方法声明?

    我正在尝试解析方法声明 基本上我需要获取接收者基本类型的语法节点 type hello 和返回类型 notype and error The ast包看起来很简单 但由于某种原因我没有得到我需要的数据 即字段报告为零 唯一有用的数据似乎仅在
  • OSX 上的 JavaFX 屏幕捕获无头异常

    我正在将旧的 java 应用程序从 swing 转换为 javafx 但遇到了问题 我使用以下代码来捕获屏幕截图 public ScreenCapper ge GraphicsEnvironment getLocalGraphicsEnvi
  • HtmlUnit 和片段标识

    我目前想知道如何处理片段标识 我想要从中获取信息的链接包含片段标识 看起来 HtmlUnit 正在丢弃我的 url 的 db4mj 因此加载原始 url 有谁知道处理片段身份的方法吗 如果需要 我可以发布示例代码来进一步解释 EDIT 由于
  • 在 Redux Thunk 中使用 getState 是一个好的实践吗?

    我在其他问题中看到了关于是否使用的相互矛盾的 或者对我来说只是令人困惑的 答案getState在一个动作中是可以接受的 也可以是不可以接受的 我已经好几次看到它被称为反模式 对我来说 它似乎工作得很好 但如果我们不使用的话 这样做的最佳实践
  • 如何在 Java AWT 和/或 Swing 中更改光标图像?

    I m making a simple graphics editor i e a paint program I am not planning on anything fancy but I do want my program to
  • Laravel 返回带有旧输入的页面进行验证

    对于更新个人资料页面 我使用路线作为 Route get editdriver data DriverController EditDriver 在我使用验证后的控制器中 return Redirect to editdriver data
  • 如何使用 JavaScript 只允许字母数字字符

    一直在玩 JavaScript 我想做的就是只允许密码字段中的某些字符 a z A Z 和 0 9
  • HTML 阻止空格键滚动页面

    我正在使用代码 window onkeydown function e return e keyCode 32 这正是我想要的 当按下空格键时停止页面滚动 但是 它也会阻止用户在文本框中键入空格 有没有办法在打字时防止空格键滚动并保留空格键
  • .NET DDD 示例 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 您使用哪些 Python 重构工具? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有很多类想要重命名 其中一些名称很小 并且该名称在其他类名称中重复使用 我不希望更改该名称 其中大部分
  • GitHub Action:如何在 docker 容器内运行命令

    今天刚开始学习CI CD 今天不知道 docker 之前是什么 我能够通过我的 Unity 项目在 CircleCI 上运行 CD 所有运行命令都发生在 docker 容器内 version 2 1 executors unity dock
  • 修复 HTML 视频元素的黑色矩形

    我正在实施 WebRTC 视频聊天 我想实现以下案例 默认情况下 视频元素通过 CSS 具有背景图像 如果没有视频输入 则用户会看到他 或对话者 的头像 No video expected result No video actual re