Create dynamic video archive

5 pts.
Tags:
JavaScript
Video streaming
Web development
This is the code from my watershed (paid portion of ustream.tv) site that I'm trying to get to work on my own website. (I've got an account with Watershed, and have the right to do this, but Watershed does not have a tech support team to show me how to implement the dynamic archive I want. So here's the code that works on the Watershed site. What do I have to do to implement this functionality on my web site? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Watershed (Powered By Ustream.Tv)</title> <link rel="SHORTCUT ICON" href="/favicon.ico" /> <meta name="robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="/css/style.css?2009020601" /> <script type="text/javascript" src="/js/framework.js?2009020601"></script> <script type="text/javascript" src="/js/xml.js?2009020601"></script> <!--[if lte IE 6]> <style type="text/css"> div.tooltip div.tip{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='/images/tooltip1.png'); } div.tooltip div.tip-bottom{ background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='/images/tooltip2.png'); } </style> <![endif]--> <script type="text/javascript"> </script> <style type="text/css"> div.qfield div input.text { width: 250px; } </style> </head> <body id="recorded-recorded" > <script type="text/javascript"> var pageId = 'recorded-recorded'; var staticUrl = '/'; </script> <div id="site"> <div id="header"> <h1><a href="/">Ustream Watershed</a></h1> <ul class="menu"> <li><a href="/dashboard" >Dashboard</a></li> <li><a href="/brand" >Brands</a></li> <li><a href="/analytics" >Stats</a></li> <li><a href="/monitor/live" >Live</a></li> <li><a href="/recorded/recorded" class="active">Video</a></li> <li><a href="/account/profile" >Profile</a></li> <li><a href="/support" >Support</a></li> <li class="login"> Logged in: <a href="/account/home" class="user">nhorsley</a> | <a href="/auth/logout" class="login">Logout</a> </li> </ul> </div><!-- // header --> <div id="sidebar"> <div class="bg"> <div class="brand"> <label for="a1">Brand:</label> <select id="a1"> <option value="/recorded/brand/recorded/0">See all</option> <option value="/recorded/brand/recorded/764" selected>Horsley for Governor</option> <option value="/recorded/brand/recorded/1038" >StateGospel </option> </select> </div><!-- // brand --> <ul class="menu"> <li><a href="/recorded/recorded" class="active">Recorded</a></li> </ul> </div> </div><!-- // sidebar --> <div id="content"> <div class="bg1"> <div class="bg2"> <script type="text/javascript"> var videosEmbed = new Array(); </script> <h1>Recorded</h1> <p> Access your recorded broadcasts here or copy and paste the embed code below to view the broadcasts on another website. </p> <div style="width:320px;float:left;margin-right:20px;"> <h2 style="padding:0;margin:0;font-size:16px;height:22px;" id="videoTitle">Untitled</h2> <!-- VIEWER BLOCK --> <div id="channelFlashContent" style="width:320px;height:260px;"> <noscript> <object id="viewer" name="viewer" width="320" height="260" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="http://www.ustream.tv/flash/viewer.swf" /> <param name="flashvars" value="sessionId=bf0c5fe14c94273ca85aa1e0b1243d4f22ef82df&application=watershed&vid=764/1000191&menu=false&" /> <embed src="http://www.ustream.tv/flash/viewer.swf" bgcolor="" quality="high" width="320" height="260" name="viewer" align="middle" play="true" loop="false" allowFullScreen="true" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" flashvars="sessionId=bf0c5fe14c94273ca85aa1e0b1243d4f22ef82df&application=watershed&vid=764/1000191&menu=false&"> </embed> </object> </noscript> </div> <script type="text/javascript" defer="defer"> var viewer_so = new SWFObject('http://www.ustream.tv/flash/viewer.swf', 'viewer', '320', '260', '9.0.115'); //"); viewer_so.useExpressInstall('/expressinstall.swf'); viewer_so.addParam('allowFullScreen', 'true'); viewer_so.addParam('allowScriptAccess', 'always'); viewer_so.addParam('wmode', 'opaque'); viewer_so.addVariable('sessionId', 'bf0c5fe14c94273ca85aa1e0b1243d4f22ef82df'); viewer_so.addVariable('application', 'watershed'); viewer_so.addVariable('vid', '764/1000191'); viewer_so.addVariable('menu', 'false'); window.addEvent('domready', function(){ viewer_so.write('channelFlashContent'); }); viewer_so.refresh = function() { this.write('channelFlashContent'); } viewer_so.openwindow = function(url) { window.open( url , '', 'width=640,height=501,resizable=1'); } var timerViewer = setInterval(function(){ if($('viewer')) { $('viewer').focus(); clearInterval(timerViewer); } },500); </script> <!-- VIEWER BLOCK --> <div style="margin-top: 20px;"> <textarea style="width: 313px;height:80px;" id="videoEmbed" readonly="readonly"><embed flashvars="autoplay=false&vid=764%2F1000191" width="320" height="260" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" /></textarea> <div> <div style="position: relative;width:120px;height:20px;margin-right: 12px;"> <div class="copyto" rel="videoEmbed" id="cl1" style="z-index:2;position:absolute;top:0px;left:0px;width:120px;height:20px;"></div> <input type="button" class="submit" value="Copy To Clipboard" style="width: 120px;z-index:1;position:absolute;top:0px;left:0px;height:20px;" /> </div> <br class="clear"/> </div> </div> </div> <div class="monitorList" style="float:left;width:395px;"> <table cellpadding="0" cellspacing="0" width="385" style="background:#555;;margin:22px 0 0 10px;"> <tr> <td style="padding:2px 0 2px 5px;"> <label>Sort by:</label> <select onchange="document.location.href = $('order').options[$('order').selectedIndex].value;" id="order"> <option value="/recorded/recorded/newest_first/1" >Newest First</option> <option value="/recorded/recorded/oldest_first/1" >Oldest First</option> <option value="/recorded/recorded/start_from_a/1" >Start from A</option> <option value="/recorded/recorded/start_from_z/1" >Start from Z</option> <option value="/recorded/recorded/most_views/1" >Most Views</option> <option value="/recorded/recorded/fewest_views/1" >Fewest Views</option> </select> </td> <!--td align="right" style="padding:2px 5px 2px 0;"> <input type="text" class="text" value="Search" style="width:100px;"/> <input type="submit" class="submit" value="Go" /> </td--> </tr> </table> <br /> <script type="text/javascript"> videosEmbed['764/1000191'] = new Array(); videosEmbed['764/1000191']['embed'] = '<embed flashvars="autoplay=false&vid=764%2F1000191" width="320" height="260" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" />'; videosEmbed['764/1000191']['title'] = 'Untitled'; </script> <div class="item" rel="764/1000191"> <h4><span style="float:left;width: 80px;" title="Untitled">Untitled</span><a style="float:left;" onclick="if(confirm('Are you sure want to delete this video?')){document.location.href = '/recorded/recorded/delete/1000191';}" href="javascript:void(false);">Delete</a></h4> <br class="clear"/> <img title="Untitled" src="http://s1.ustream.tv/apivideos/7/6/1/0/0/0/764_1000191.jpg" width="120" height="90" alt="" /> <p> <strong>Brand:</strong> Horsley for<br /> <strong>Recorded:</strong>19 hours ago<br /> <strong>Views:</strong> 0<br /> <strong>Status:</strong> <span class="status">Complete</span> <strong>Length:</strong> 21:21 minutes<br /> <strong>Size:</strong> 46,423,642 bytes<br /> </p> </div> <script type="text/javascript"> videosEmbed['764/1000127'] = new Array(); videosEmbed['764/1000127']['embed'] = '<embed flashvars="autoplay=false&vid=764%2F1000127" width="320" height="260" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwave-flash" />'; videosEmbed['764/1000127']['title'] = 'Deterrance'; </script> <div class="item" rel="764/1000127"> <h4><span style="float:left;width: 80px;" title="Deterrance">Deterrance</span><a style="float:left;" onclick="if(confirm('Are you sure want to delete this video?')){document.location.href = '/recorded/recorded/delete/1000127';}" href="javascript:void(false);">Delete</a></h4> <br class="clear"/> <img title="Deterrance" src="http://s1.ustream.tv/apivideos/7/6/1/0/0/0/764_1000127.jpg" width="120" height="90" alt="" /> <p> <strong>Brand:</strong> Horsley for<br /> <strong>Recorded:</strong>3 days ago<br /> <strong>Views:</strong> 0<br /> <strong>Status:</strong> <span class="status">Complete</span> <strong>Length:</strong> 33:33 minutes<br /> <strong>Size:</strong> 37,998,053 bytes<br /> </p> </div> <br class="clear" /> </div> <br class="clear" /> <script type="text/javascript"> var recordeds = new Class({ initialize: function() { $$('.item').each(function(obj){ if ( obj.getElement('span[class=status]').get('html') == 'Complete' ) { var img = obj.getElement('img'); img.setStyle('cursor', 'pointer'); img.addEvent('click', function(){ $('viewer').javascriptControl('player', {vid: obj.get('rel')}); $('videoEmbed').set('value', videosEmbed[obj.get('rel')]['embed']); $('videoTitle').set('html', videosEmbed[obj.get('rel')]['title']); setClipboardSwf(); }); } }); } }); var rcs = null; window.addEvent('domready', function(){ rcs = new recordeds(); }); </script> </div> </div> </div>
ASKED: February 28, 2009  7:37 PM
UPDATED: November 9, 2011  6:47 AM

Answer Wiki

Thanks. We'll let you know when a new response is added.

If u r a Web Programmer, u may build web site comfortably. There r several technics to use for build a complete website. U can use ready made web page builder like Dreamweaver, Adobe In Design, Fusion Essential or Web Studio etc. There is requirement of Domain name and a media who helps to host ur web site. The above code, u given here, may not possible to correct in one shot here. It depends on ur requirements. what kind of product u want to introduce thru ur website, that clearly disclose.
There r some sites that can help to build ur website on line and most of them r almost free. but not for domain name registration etc…. For better concept and more info please <a href=”http://www.quackit.com/create-a-website/”>HERE</a>
In the above code, there is also a good site already mentioned there at 2nd line. i.e. www.w3.org

Hope it helps u !

Discuss This Question:  

 
There was an error processing your information. Please try again later.
Thanks. We'll let you know when a new response is added.
Send me notifications when members answer or reply to this question.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Forgot Password

No problem! Submit your e-mail address below. We'll send you an e-mail containing your password.

Your password has been sent to:

To follow this tag...

There was an error processing your information. Please try again later.

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Thanks! We'll email you when relevant content is added and updated.

Following