修复HTML视频元素的黑色矩形 [英] Fix black rectangle for HTML video element

问题描述

我正在实施WebRTC视频聊天。我想实现以下情况：

默认情况下，视频元素通过CSS具有背景图像，如果没有视频输入，则用户看到他（或对话者）的头像：

没有视频预期结果：

没有视频结果：

从截图中可以看到，我的背景上有黑色矩形。我想让这个丑陋的黑色矩形透明，并保持我的视频背景可见。

事实上，解决这个问题真的太棒了，不需要引入额外的标记。

感谢您的帮助=）

更新：

视频意味着用户/用户没有网络摄像头，流只有音频轨道。

>

深入阅读文档给出了一些结果=）这很简单：

 < video poster =image.jpg> 
  

一个简单的属性让我开心

I'm implementing WebRTC video chat. I want to implement the following case:

By default video element has background-image via css and if there are no video input then user see his (or interlocutor's) avatar:

No video expected result:

No video actual result:

As you can see from the screenshots I have black rectangles above my fancy backgrounds. I want to make this ugly black rectangle transparent and keep my video's backgrounds visible.

Actually it will be awesome to resolve the problem without introducing any additional markup.

Appreciate your help =)

Update:

"No video" means that user/users don't have web cams and stream has only audio track.

解决方案

Bingo!

Reading documentation in depth gave some results =) It was as easy:

<video poster="image.jpg">

One simple attribute made me happy

这篇关于修复HTML视频元素的黑色矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！