I have multiple video streams on a page though only one should be seen/heard at any time. Stream 1 should be visible on page load, then clicking a "Stream 2" or "Stream 3" button should switch to it accordingly.
Using Show/hide js events won't work because the hidden stream can still be heard on the page when hidden. My knowledge of js is limited to none (but I'm trying!) though it seems that detach() is a good fit for my use case as the element can be removed but also reinstated.
The below descendent of this on W3schools successfully hides Stream (element) 2, with two buttons of corresponding IDs, but ultimately I'm a way off the seamless toggle that I'm after...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x;
$("#button1_id").click(function(){
x = $("#element_two_id").detach();
});
$("#button2_id").click(function(){
$("#element_one_id").prepend(x);
});
});
</script>
</head>
</html>
Is this achievable with detach() or am I barking up the wrong tree?