Jump to content

Recommended Posts

I am working on a website for a video game streamer I watch and sometimes he plays with other streamers and viewers want to watch them both or in some cases more than 2, all play at the same time. So there are sites that do "dual streams" that will allow you to show both videos on the same page. My idea was to make something similar but scale-able to however many streams are needed. So far I have js functions with all the HTML needed add the video player but not sure how i would add a new video to the page without having to refresh. I am using the document.getElementByID('streams').innerHTML = mainStream()+newStream(); right now to manually show the primary stream and a image to click on to add another stream.

function mainStream()	 {	  result = "\t<div id=\"stream1\" class=\"td stream\">\n"+		  "\t\t<object type=\"application/x-shockwave-flash\" class=\"stream-object\" data=\"http://www.twitch.tv/widgets/live_embed_player.swf\" width=\"100%\" height=\"100%\" style=\"visibility: visible; \">\n"+		  "\t\t<param name=\"allowFullScreen\" value=\"true\">\n"+		  "\t\t<param name=\"allowScriptAccess\" value=\"always\">\n"+		  "\t\t<param name=\"allowNetworking\" value=\"all\">\n"+		  "\t\t<param name=\"wmode\" value=\"transparent\">\n"+		  "\t\t<param name=\"flashvars\" value=\"hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100\"></object>\n"+	   "\t</div>\n";	   return(result);	 }	 function newStream(streamNum)	 {	  result = "\t<div id=\"stream"+streamNum+"\" class=\"td newStream\" onclick=\"getStream()\">\n"+	  "\t\t<img src=\"lib/new_stream.fw.png\" style=\"width:100%; height:100%\" alt=\"new stream\" title=\"Click to open a new stream...\" />\n"+	   "\t</div>\n";	   return(result);	 }

In hard code it would look like this when printed:

<div id="streams">	 <div id="stream1" class="td stream" style="width: 301px; height: 169.3125px;">		  <object type="application/x-shockwave-flash" class="stream-object" data="http://www.twitch.tv/widgets/live_embed_player.swf" width="100%" height="100%" style="visibility: visible; ">		 <param name="allowFullScreen" value="true">		 <param name="allowScriptAccess" value="always">		 <param name="allowNetworking" value="all">		 <param name="wmode" value="transparent">		 <param name="flashvars" value="hostname=www.twitch.tv&channel=the_black_russian&auto_play=true&start_volume=100"></object>	 </div>	 <div id="stream2" class="td newStream" onclick="getStream()" style="width: 301px; height: 169.3125px;">		 <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream...">	 </div></div>

What I am looking to do is when someone triggers getStream() for it to add another stream and list the newStream() code last. This would make the new stream #2 and push the open a new stream part to stream #3. I also would like to add in functionality to close a specific stream. Any help is much appreciated! If I did not explain enough please let me know I will try my best to fill in any details I may have missed.

Edited by dzhax
Link to post
Share on other sites

It would be easier to do that using DOM methods rather than innerHTML. The new stream option shouldn't change, the ID of it should be something like "newstream" or something else. When you click on it then you can get the newstream element that they clicked on (or pass it directly to the handler), create your new stream node and add the attributes and children to it, and insert it before the newstream node, so that newstream automatically moves down. That's what this is for: https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore If you want to add a link to close a particular stream, then you could have it pass the ID of the container of that stream and use removeChild to remove it. https://developer.mozilla.org/en-US/docs/DOM/Node.removeChild

Link to post
Share on other sites

ok need a little help with the DOM part. I never really worked with DOM. I have made the following function:

function addNewStream()   {    // create a new div element	  // and give it some content	  var newDiv = document.createElement("span");	  newDiv.innerHTML = newStream(streamcount);	  // add the newly created element and it's content into the DOM	  my_div = document.getElementById("streams");	  document.body.insertBefore(newDiv, my_div.nextSibling);   }

It adds the code just fine, the only problem is instead of adding the content inside of <div id="streams"></div> it adds it after.

<div id="streams"></div><span> <div id="stream1" class="td newStream" onclick="getStream()">  <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span>

Ideally i would like to to be:

<div id="streams"><span> <div id="stream1" class="td newStream" onclick="getStream()">  <img src="lib/new_stream.fw.png" style="width:100%; height:100%" alt="new stream" title="Click to open a new stream..."></div></span></div>

Link to post
Share on other sites

Yeah, that's what you're telling it to do here: document.body.insertBefore(newDiv, my_div.nextSibling); You're telling it to insert the element as a child of document.body, before a sibling of my_div. The parent should not be document.body, it should be your container div. Also, like I said, I highly suggest that you have your "new stream" div hard-coded into HTML instead of inserted via Javascript. That element does not need a dynamic ID and should always be visible. Insert new elements before it to have it keep being the last item in the list.

Link to post
Share on other sites


<script type="text/javascript">function insertEl(){  var el = document.getElementById('new_item');  var new_el = document.createElement('div');  new_el.innerHTML = 'this is a new element';  el.parentNode.insertBefore(new_el, el);}</script><div id="new_item" onclick="insertEl()">Insert new item</div>

There's no reason to give that "click to create a new element" div a dynamic ID or create it through Javascript, it's just a link. It doesn't even need to be a div.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...