Thanks Vince for the help with updating FLVPlayer to use the latest versions of JW FLVPlayer!
With help of Calguy (who originally wrote this module for me) I have made some changes to the templates we use at
www.okv.se (Webb-TV). But there are a couple of things I don't get working with the Javascript. Maybe someone here could help.
1) typ never seems to be "item". That is, I have this function called getUpdate and if(typ == "item"), then it will call getItemData() that among other things is to include a download link and "E-mail a friend" (like at
http://home5.inet.tele.dk/nyboe/flash/mediaplayer/replay.htm). In getImageData() is also the "bonus to show what is loaded in the player" that Vince included in his first code example. But that div never gets loaded... Why is typ not set to item?
2) The latest JW FLVPlayer can handle h.264-encoded mp4 files, if the user has the latest Flash Player. I also include Flash variables to detect bandwidth, as is explained on
http://www.jeroenwijering.com/extras/ba ... check.html
Now the issue is that if I have an flv file and set the file extension to flv, then the correct bandwidth is detected and the file gets the suffix _768 if the bandwidth is above 768kbs. That is, the file to be played is changed from NNN.flv to NNN_768.flv.
When I set the file extension to mp4 this doesn't work. It may of course be a bug with JW FLVPlayer. But can anyone see if I may have done something wrong in the code?
I'm testing this out at
http://www.kisima.org/index.php?page=testar-flv. The first file is mp4, the second is flv. Right now the file extension is set to mp4, so only the first video can be played. It's called NBV003paa.mp4, so if the bandwidth detection variables worked it should not be played... (as my bandwidth is much faster than that so that NBV003paa_768.mp4 should be played).
Btw, the player and the details about the video is updated separately, in the newMovie() function. That is with xmlHttpdRequest, thanks to Calguy.
My templates look like this. Summary template:
Code: Select all
{* The new default summary template *}
<!-- Some Handy Javascript -->
{literal}
<__script__ language="javascript" type="text/javascript">
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
var displayed = 0;
function updateDiv(nid, text)
{
if (document.getElementById)
{
x = document.getElementById(nid);
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[nid];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[nid];
x.document.open();
x.document.write(text);
x.document.close();
}
}
function updateDetails(thediv,url) {
http.open("GET", url + '&cntnt01showtemplate=false', false);
http.send(null);
if (http.readyState == 4)
{
updateDiv(thediv,http.responseText);
}
}
</__script>
<!-- Include some javascript for link control of the player -->
<__script__ type="text/javascript">
var currentPosition;
var currentVolume;
var currentItem;
function sendEvent(typ,prm) { thisMovie("mpl").sendEvent(typ,prm); };
function getUpdate(typ,pr1,pr2,pid) {
if(typ == "time") { currentPosition = pr1; }
else if(typ == "volume") { currentVolume = pr1; }
else if(typ == "item") { currentItem = pr1;setTimeout("getItemData(currentItem)",100); }
var id = document.getElementById(typ);
id.innerHTML = typ+ ": "+Math.round(pr1);
pr2 == undefined ? null: id.innerHTML += ", "+Math.round(pr2);
if(pid != "null") {
document.getElementById("pid").innerHTML = "(received from the player with id <i>"+pid+"</i>)";
}
};
// These functions are caught by the feeder object of the player.
function loadFile(obj) { thisMovie("mpl").loadFile(obj); };
function addItem(obj,idx) { thisMovie("mpl").addItem(obj,idx); }
function removeItem(idx) { thisMovie("mpl").removeItem(idx); }
function getItemData(idx) {
var obj = thisMovie("mp1").itemData(idx);
var nodes = "";
for(var i in obj) {
nodes += "<li>"+i+": "+obj[i]+"</li>";
}
document.getElementById("data").innerHTML = nodes;
var tmp=obj["file"];
var subj="Video%20Link";
var theAdr='the@email.adr';
if(tmp!="") {
var theURL='<a href="'+tmp+'">Download</a> ';
var theMail='<a href=mailto:'+theAdr+'?subject='+subj+'&body='+tmp+'>E-mail a friend</a>';
document.getElementById("tipsa").innerHTML = theURL+theMail;
} else document.getElementById("tipsa").innerHTML = "";
};
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};
function createPlayer(theFile) {
var so = new SWFObject("{/literal}{$flvplayerlocation}{literal}/mediaplayer.swf","mpl","400","300","7");
ImageFile = theFile+'.jpg';
VideoFile = theFile+'.mp4';
FallbackFile = theFile+'.flv';
so.addParam("allowfullscreen","true");
so.addVariable("file",VideoFile);
so.addVariable("width","400");
so.addVariable("height","300");
so.addVariable("displayheight","300");
so.addVariable("bwfile","{/literal}{$flvurlprefix}/100k.jpg{literal}");
so.addVariable("bwstreams","768,5000");
so.addVariable("overstretch","fit");
so.addVariable("autostart","true");
so.addVariable("image",ImageFile);
so.addVariable("fallback",FallbackFile);
so.addVariable("enablejs","true");
so.addVariable("javascriptid","mpl");
so.addVariable("callback","mysqlstat.php");
so.write("player");
}
function newMovie(urlbase,name,id,title,description,created,modified,start_date,end_date,genre,member,length,directurl) {
// replace the detail text
updateDetails('flvdetailview',directurl); // replace the detail content
movie = urlbase+'/'+name;
if( displayed == 0 )
{
// show the block
document.getElementById("player").style.display="block";
// sleep for a second
setTimeout("createPlayer(movie)",100);
displayed = 1;
}
else
{
createPlayer(movie); // load the movie
}
};
</__script>
{/literal}
{* search and rss *}
<div id="searchrss">
<p id="rss">
{cms_module module='flvplayer' mode='makerssbutton' rssimage="images/cms/feed-icon-28x28.png" feed_title="alla program"}
</p>
{* the filter form *}
{if isset($formstart)}
{assign var='submitbtn' value='Sök'}
<p id="search">
{$formstart}
<div class="invisible">{$labelstart}{$labeltext}{$labelend}: </div>{$input_keywords}{$submit}
{$formend}
</p>
</div>
{/if}
{* a poor attempt at a bookmarks thingie *}
{if isset($param_member)}
<div class="breadcrumbs"><a href="/webbtv/webbtvmedlemmar">Medlemmar</a><span style="font-weight: normal"> » </span>{$param_member}</div>
{elseif isset($param_genre)}
<div class="breadcrumbs"><a href="/webbtv/genrer">Genrer</a><span style="font-weight: normal"> » </span>{$param_genre}</div>
{elseif isset($param_input_keywords)}
<div class="breadcrumbs"><span style="font-weight: normal">Sökresultat: </span>{$param_input_keywords}</div>
{elseif isset($param_breadcrumb)}
<div class="breadcrumbs">{$param_breadcrumb}</div>
{/if}
{* This is the meat of the template, where each of the records are output *}
{if isset($param_input_keywords) && $summaryitemcount == 0}
<p>Inga resultat</p>
{elseif $summaryitems == 0}
{else}
{if $pagecount > 1}
<p class="pagelinks">
{if $pagenumber > 1}
<span class="pagelinklast">{$firstpage}</span> <span class="pagelink">{$prevpage}</span>
{/if}
{$pagetext} {$pagenumber} {$oftext} {$pagecount}
{if $pagenumber < $pagecount}
<span class="pagelink">{$nextpage}</span> <span class="pagelinklast">{$lastpage}</span>
{/if}
</p>
{/if}
<div class="video">
<ul>
{foreach from=$summaryitems item=entry}
<li>
<a class="thumbnail" href="javascript:newMovie('{$flvurlprefix}','{$entry->name}',{$entry->id},'{$entry->slash_title}','{$entry->slash_description|truncate:550}','{$entry->created|date_format:'%d.%m.%y'}','{$entry->modified|date_format}','{$entry->start_date|date_format}','{$entry->end_date|date_format}','{$entry->genre}','{$entry->member}','{$entry->length_hours}:{$entry->length_minutes}:{$entry->length_seconds}','{$entry->url}')"><img src="{$flvurlprefix}/{$entry->name}.jpg" alt="{$entry->name}"/></a>
<a class="videoinfo" href="javascript:newMovie('{$flvurlprefix}','{$entry->name}',{$entry->id},'{$entry->slash_title}','{$entry->slash_description|truncate:550}','{$entry->created|date_format:'%d.%m.%y'}','{$entry->modified|date_format}','{$entry->start_date|date_format}','{$entry->end_date|date_format}','{$entry->genre}','{$entry->member}','{$entry->length_hours}:{$entry->length_minutes}:{$entry->length_seconds}','{$entry->url}')">
<p class="videotitle">{$entry->title} <span class="videolength">({if $entry->length_hours > 0}{$entry->length_hours}:{/if}{$entry->length_minutes}:{$entry->length_seconds})</span></p>
<p class="videomember">{$entry->member}</p>
<p class="videodate">{$entry->start_date|date_format:'%d.%m.%y'}</p>
</a>
</li>
{/foreach}
</ul>
</div>
{/if}
Detail template for video details:
Code: Select all
<ul id="flvdetails">
<li id="flvshow_titlerow">
<p id="flvshow_created">{$field_start_date|date_format:'%d.%m.%y'}</p><span id="flvshow_title">{$field_title}</span> <span id="flvshow_length">({if $field_length_hours > 0}{$field_length_hours}:{/if}{$field_length_minutes}:{$field_length_seconds})</span><span id="rbw"></span> kbps.
</li>
<li id="flvshow_description">{$field_description|truncate:550}
{if !isset($param_fromlink)}
{$more}
{/if}</li>
<li id="flvshow_member"><span id="tipsa" style="float: right;"></span>{$field_member}</li>
</ul>
<h2>RECEIVE UPDATES</h2>
<p id="pid"></p>
<ul>
<li id="item"> </li>
<li id="volume"> </li>
<li id="state"> </li>
<li id="time"> </li>
<li id="load"> </li>
<li id="size"> </li>
</ul>
// A bonus too to show what is loaded in the player
<h2>ITEM DATA</h2>
<ul id="data"></ul>
Template for the FLVPlayer div only:
Code: Select all
<p id="player" style="display:none;">
<!--- this content replaced by the swf media -->
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this movie.
</p>
<__script__ type="text/javascript" src="{$flvplayerlocation}/swfobject.js"></__script>
{literal}
<__script__ type="text/javascript">
function getBandwidth(bw) {
document.getElementById('rbw').innerHTML = bw;
};
</__script>
{/literal}
Sorry if it's a messy explanation, it's very late here now... Would be grateful with any assistance to get this working properly! Thanks!
