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

Question

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

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

没有视频预期结果：

没有视频实际结果：

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

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

感谢您的帮助=）

更新：

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

Answer 1

宾果！

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

<video poster="image.jpg">

一个简单的属性让我开心

Answer 2

在Chrome视频或waitUntilRemoteStreamStartsFlowing中尝试Alpha transparency。

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);
}