javascript - 交换视频标签会使整个 div 变空

Question

我正在使用 JANUS 来流式传输视频。

我有 2 个 div 标签，其中一个比另一个大，并且我保留了交换元素的选项。这些 div 标签包含视频标签。 我有 2 个视频标签，一个用于传输本地视频，另一个用于传输远程视频。 以下是我尝试过的功能。

var swappingVideoFunction = function() {

  var localVideo = $("#videolocal").html();
  var remoteVideo = $("#videoremote1").html();
  console.log(localVideo);
  $("#videolocal").html(remoteVideo);
  $("#videoremote1").html(localVideo);

}

我可以看到在检查的 html 中，视频标签存在于所需的 div 中，但视频完全空白。完整的 div 看起来是空的。一般视频标签都是这种情况吗？有没有办法做到这一点？

Answer 1

所以我的想法是，您写入的对象可能正在更新引用。这就是为什么 JQuery clone() 函数可以方便地从原始对象中删除引用。

查看以下代码片段。

var swappingVideoFunction = function() {
  var localVideo = $("#videolocal").clone();
  var remoteVideo = $("#videoremote1").clone();
  $("#videolocal").html(remoteVideo.html());
  $("#videoremote1").html(localVideo.html());
}

.green {
  height: 50%;
  background-color: green;
  padding: 10px;
  box-sizing: contain;
}
.red {
  height: 50%;
  background-color: red;
  padding: 10px;
  box-sizing: contain;
}

.swap-button {
  float: right
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="swap-button" onClick="swappingVideoFunction()">Do Swap</button>
<div id="videolocal">
  <video class="red" width="320" height="240" controls>
    <source src="local.mp4" type="video/mp4">
    <source src="local.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</div>
<div id="videoremote1">
  <video class="green" width="320" height="240" controls>
    <source src="remote.mp4" type="video/mp4">
    <source src="remote.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</div>