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

Question

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

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

没有视频预期结果：

无视频实际结果：

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

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

感谢您的帮助 =)

更新：

“无视频”表示用户没有网络摄像头，流只有音轨。

Answer 1

宾果游戏！

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

<video poster="image.jpg">

一个简单的属性让我开心

Answer 2

在 Chrome 视频中尝试Alpha transparency 或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);
}