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（）函数可以方便地从原始对象中删除引用。

查看以下代码段。

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

1 个答案: