0

我正在使用 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 看起来是空的。视频标签一般都是这种情况吗？有没有办法做到这一点？

4

1 回答 1

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>

于 2017-08-18T11:24:35.887 回答