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

Question

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

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

没有视频预期结果：

​

没有视频实际结果：

​

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

实际上，在不引入任何附加标记的情况下解决这个问题将是非常棒的。

谢谢你的帮助

更新：

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

Answer 1

对啰!

深入阅读文档给出了一些结果=)它同样容易：

<video poster="image.jpg">

一个简单的属性让我高兴

Answer 2

试试Chrome视频或waitUntilRemoteStreamStartsFlowing中的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);
}