Media stream source sink defines a container where video should be rendered.
The container property should hold a reference to a DOM Node where stream
should be rendered. Whenever container is updated video should render in the
new container instead of the old one.
Toggle (hide and show) video using DOM and CSS may be desirable in a websdk
application that needs to handle multiple conversations, where more than one
conversation can have video and the application wants to show one video at a
time and switch between multiple video sources using a button.
The application can achieve this using the "visibility" property in CSS:
$("#videoContainer1").css("visibility", "hidden"); // to hide container
$("#videoContainer2").css("visibility", "visible"); // to show container
The same effect can NOT be achieved using the "display" property. In other
words, setting $("#videoContainer1").css("display", "none") might unload the
plugin object such that setting the display back to "block" will not bring the
video back.
It means using the jQuery "hide()" and "show()" functions will not achieve the
aforementioned toggle effect.
Similarly, attempting to detach the DOM element and then append it back might
not achieve the toggle effect either. The detach operation would remove the
element, which might cause the plugin object to be unloaded.
In order to achieve the effect using DOM, the application can set the container
of the video stream to 'null' and later back to the right DOM element:
var container = conversation.participant(0).video.channels(0).stream.source.sink.container;
container(null); // to hide videocontainer(document.getElementById(�videoContainer1�)); // to show video
Media stream source sink defines a container where video should be rendered. The container property should hold a reference to a DOM Node where stream should be rendered. Whenever container is updated video should render in the new container instead of the old one.
Toggle (hide and show) video using DOM and CSS may be desirable in a websdk application that needs to handle multiple conversations, where more than one conversation can have video and the application wants to show one video at a time and switch between multiple video sources using a button.
The application can achieve this using the "visibility" property in CSS:
$("#videoContainer1").css("visibility", "hidden"); // to hide container $("#videoContainer2").css("visibility", "visible"); // to show containerThe same effect can NOT be achieved using the "display" property. In other words, setting $("#videoContainer1").css("display", "none") might unload the plugin object such that setting the display back to "block" will not bring the video back.
It is worth noting the following equivalence:
$("#container1").hide() equals $("#container1").css('display', 'none') $("#container1").show() equals $("#container1").css('display', 'block')It means using the jQuery "hide()" and "show()" functions will not achieve the aforementioned toggle effect.
Similarly, attempting to detach the DOM element and then append it back might not achieve the toggle effect either. The detach operation would remove the element, which might cause the plugin object to be unloaded.
In order to achieve the effect using DOM, the application can set the container of the video stream to 'null' and later back to the right DOM element:
var container = conversation.participant(0).video.channels(0).stream.source.sink.container; container(null); // to hide video container(document.getElementById(�videoContainer1�)); // to show video