Question

我正在使用WebRTC用户界面，该界面以小元素显示用户的视频，该小元素位于用户正在讲话的人的视频前面。

这是一个有效的代码笔：

CSS

#pipContainer {
    position: relative;
    top: 0;
    left: 0;
  width: 250px;
}

#otherCallerVideo  {
    position: relative;
    top: 0;
    left: 0;
  width: 100%;
}

#myVideo {
    width: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: rotateY(-180deg);
    z-index: 1000;
}

HTML

  <p id="status">Loading room information...</p>

  <div id="start">
    <button  onclick="start(event)">Start</button><br/>
  </div>

  <div id="pipContainer">
    <video id="otherCallerVideo" playsInline="true" autoPlay></video>
    <video id="myVideo" playsInline="true" autoPlay muted></video>
  </div>

这在Chrome和Firefox中可以正常使用，但Safari OS X和IOS似乎不允许这样做。用户的视频消失。我尝试了很多不同的方式，使用z-index和不同的定位方式，但是我还没有找到一种方法可以使它在Safari中正常工作。

是否可以在Safari中执行此操作？

Answer 1

我已经开始工作了。这是更新的CodePen。

https://codepen.io/VikR/pen/Wgwwoa

关键是将此overflow代码放入视频容器：

#pipContainer {
  position: relative;
  width: 300px;
  height: 300px;
  border: 5px solid black;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

这很难追踪。谷歌搜索“ safari z-index视频元素”显示许多人对此感到困难，2011年至2018年的帖子显示在结果的第一页上。在其他情况下可以使用的许多修复程序在这种情况下似乎都无法使用，可能是因为我将一个视频元素叠加在另一个视频元素上。找到有效的修复程序here.

注1：overflow: 'hidden'也可以使用，并且具有隐藏滚动条的额外好处。

注2：我的印象是，可能无法通过javascript更改视频尺寸。目前，在我的应用中，我通过引用screen.height在HTML呈现器上设置它们。

WebRTC：Safari会阻止视频画中画吗？

1 个答案: