HTML Playlist with MC Altair
The example below shows how you can make a playlist to drive MC Altair. Please note this this is a rough example—I put it together very quickly and it's not meant to be a finished product. At this stage the playlist works by simply reloading the player with the specified file set to autoplay. While this works okay, it's not ideal. I will develop a better HTML/JavaScript playlist method, but the ultimate goal is to include a built-in playlist like the one in MC Classic (but better and more configurable).
|
Merv Smith at Museum
Merv Smith speaks at the opening of the '100 Years Down the Track' exhibition. (45:40)
Santa Parade
Annual Christmas Parade. (12:30)
Institutional Memories & Landscapes
Historian Catharine Coleborne talks about the project to preserve the heritage of Tokanui (36:47)
Waipa Networks Business Awards
Highlights from the Business Awards held at the Te Awamutu Events Centre, 14th July 2006. (8:00)
Kihikihi Waikato Eventing
This is the winning video presentation used by Kihikihi Waikato Eventing at the Trustpower Community Awards. (06:20)
May 2008: You Have a Message
Video produced by local school children about what they want from their education. (30:00)
-- (The Making Of) (09:30)
-- (Teacher Reaction) (05:49)
|
|
Head content:
<script type="text/javascript">
function reloadPlayer(file) {
document.getElementById('player').innerHTML = '';
var newCode = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="480" height="270">';
newCode += '<param name="movie" value="/mcmp.swf?fpFileURL='+file+'&fpAction=play"><param name="allowFullscreen" value="true"><param name="bgcolor" value="#000000">';
newCode += '<embed src="/mcmp.swf?fpFileURL='+file+'&fpAction=play" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="480" height="270" allowfullscreen="true" bgcolor="#000000"></embed></object>';
document.getElementById('player').innerHTML = newCode;
}
</script>
<style type="text/css">
<!--
#playlist {
width:300px;
height:270px;
overflow-y: scroll;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
margin: 0 20px 0 0;
}
.plEntry {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #F0F0F0;
margin: 0 0 4px 0;
padding: 5px;
border: 1px solid #999999;
cursor:pointer;
}
.plTitle {
font-size:14px;
color:#0000FF;
}
.plTitleSmall {
font-size:12px;
color:#0000FF;
}
-->
</style>
function reloadPlayer(file) {
document.getElementById('player').innerHTML = '';
var newCode = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="480" height="270">';
newCode += '<param name="movie" value="/mcmp.swf?fpFileURL='+file+'&fpAction=play"><param name="allowFullscreen" value="true"><param name="bgcolor" value="#000000">';
newCode += '<embed src="/mcmp.swf?fpFileURL='+file+'&fpAction=play" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="480" height="270" allowfullscreen="true" bgcolor="#000000"></embed></object>';
document.getElementById('player').innerHTML = newCode;
}
</script>
<style type="text/css">
<!--
#playlist {
width:300px;
height:270px;
overflow-y: scroll;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
margin: 0 20px 0 0;
}
.plEntry {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #F0F0F0;
margin: 0 0 4px 0;
padding: 5px;
border: 1px solid #999999;
cursor:pointer;
}
.plTitle {
font-size:14px;
color:#0000FF;
}
.plTitleSmall {
font-size:12px;
color:#0000FF;
}
-->
</style>
Body content:
<!-- Player & Playlist -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<div id="playlist">
<!-- Playlist Entry -->
<div class="plEntry" onclick='reloadPlayer("")'>
<span class="plTitle">Title</span><br>
Description
</div>
<!-- / Playlist Entry -->
</div>
</td>
<td valign="top">
<div id='player' style="width:480px;height:270px;background-color:#000000;margin:0;padding:0;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="480" height="270">
<param name="movie" value="/mcmp.swf">
<param name="quality" value="high">
<embed src="/mcmp.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="480" height="270"></embed>
</object>
</div>
</td>
</tr>
</table>
<!-- / Player & Playlist -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<div id="playlist">
<!-- Playlist Entry -->
<div class="plEntry" onclick='reloadPlayer("")'>
<span class="plTitle">Title</span><br>
Description
</div>
<!-- / Playlist Entry -->
</div>
</td>
<td valign="top">
<div id='player' style="width:480px;height:270px;background-color:#000000;margin:0;padding:0;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="480" height="270">
<param name="movie" value="/mcmp.swf">
<param name="quality" value="high">
<embed src="/mcmp.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="480" height="270"></embed>
</object>
</div>
</td>
</tr>
</table>
<!-- / Player & Playlist -->