交換視頻標籤正在使整個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>