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

Question

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

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

无视频预期结果：

无视频实际结果：

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

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

感谢您的帮助 =)

更新：

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

Answer 1

答对了！

深入阅读文档得到了一些结果 =) 很简单：

<video poster="image.jpg">

一个简单的属性让我开心

Answer 2

在Chrome视频或waitUntilRemoteStreamStartsFlowing.

function onaddstream(event) {
    remote_video.src = webkitURL.createObjectURL(event.stream);
    // remote_video.mozSrcObject  = event.stream;

    waitUntilRemoteStreamStartsFlowing();
}

function waitUntilRemoteStreamStartsFlowing()
{
    if (!(remote_video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA 
        || remote_video.paused || remote_video.currentTime <= 0)) 
    {
        // remote stream started flowing!
    } 
    else setTimeout(waitUntilRemoteStreamStartsFlowing, 50);
}