Q:
Create dynamic video archive
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>
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:
Feb 28 2009 7:37 PM GMT
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
0
