交換視頻標簽會使整個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>