交换视频标签会使整个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>