[solved] FLVPlayer with last version of JW (3.9)

[vinc]

Hi everybody,

I managed to use FLVPlayer module in a page :
>first list all the videos
>then when cliking on a video, it must show the player and the video (?)

I'm using firebug and when i clic on a video link it says " thisMovie("mediaplayer") has no properties "
I'm using the default templates

I don't know where i get wrong... because i can see videos when i use the 'detail' template...

Thank you for your help !

[vinc]

Hi there,

I ran out of version 3.2 of FLV Player that i did not managed to get work

Instead I'm using v3.9 (the last one actually) which can do fullscreen quite well

I did not try to use the bultin playlist funtion of the player but I assume the summray and list templates of the module will do this well.

All you have to do to get it work is :
1- It requires the CGExtensions module so install this module first for your Cmsms install
2- Install the FLVPlayer module
3- get the last version (at least 3.9) of the JW FLV PLayer (http://www.jeroenwijering.com/?item=JW_FLV_Player)
4- Extract the zip file and copy the files flvplayer.swf and swfobject.js to your web server (maybe in the /modules/FLVPlayer/JWFLVPlayer directory to get things ordered)
5- Add permission to some users/groups to manage FLV Files (in Admin -> Users -> Permissions)
6- Go and get to Admin -> Content -> Flash Video Manager
6.1- Create at least a member and a group
6.2- add some videos to your install
6.3- update the paths to your files like :
FLV File URL Prefix:  http://www.mydomain.tld/path/to/my/videos
FLV Player URL: http://www.mydomain.tld/path/to/my/player

Note : /!\ No trailing slash at the end !!

7- Create some new templates like these ones and make them default :

/*******************Summary template*********************/

Code: Select all

{literal}
<__script__ type="text/javascript">

// some variables to save
var currentPosition;
var currentVolume;
var currentItem;

// these functions are caught by the JavascriptView object of the player.
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("mpl").itemData(idx);
	var nodes = "";
	for(var i in obj) { 
		nodes += "<li>"+i+": "+obj[i]+"</li>"; 
	}
	document.getElementById("data").innerHTML = nodes;
};

// This is a javascript handler for the player and is always needed.
function thisMovie(movieName) {
        if(navigator.appName.indexOf("Microsoft") != -1) {
		return window[movieName];
	} else {
		return document[movieName];
        }
};

// I assume here that you have a jpeg file named exactly the same as you video file (video.flv <> video.jpg)
function newMovie(urlbase,name,movie_id,movie_title,description,created,modified,start_date,end_date,genre,member,length,directurl) {
movie_url = urlbase+'/'+name+'.flv';
image_url = urlbase+'/'+name+'.jpg';
loadFile({file:movie_url,title:movie_title,link:movie_url,id:movie_id,image:image_url,author:member});
};
</__script>
{/literal}

// This is not the default but you can arrange this to suit your needs...

<a href="javascript:sendEvent('stop')">Stop loading and playing</a>.

// This must list all the movies creating a link to load it in the player
<div class="showSummary">
{foreach from=$summaryitems item=entry}
 <p class="showValue"><a href="javascript:newMovie('{$flvurlprefix}','{$entry->name}',{$entry->id},'{$entry->slash_title}','{$entry->slash_description}','{$entry->created|date_format}','{$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}')">
{$entry->slash_title}</a></p>
{/foreach}
</div>

/*******************Detail template*********************/

Code: Select all

// First, the ufo.js is no longer used...
<__script__ type="text/javascript" src="{$flvplayerlocation}/swfobject.js"></__script>

// Here we insert the player, the text wiil be replaced by it.
<div id="player">
  <a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a>to see this movie.
</div>


// Here is the definition of the player will all the parameters... you can go to
// http://www.jeroenwijering.com/extras/readme.html#flashvars and set the vars of your own choice !

{literal}
<__script__ type="text/javascript">
var so = new SWFObject('{/literal}{$flvplayerlocation}{literal}/flvplayer.swf','mpl','320','240','7');
so.addParam('allowfullscreen','true');
so.addVariable('displayheight','240');
so.addVariable('file','{/literal}{$flvurlprefix}/{$field_name}.flv{literal}');
so.addVariable('height','240');
so.addVariable('image','{/literal}{$flvurlprefix}/{$field_name}.jpg{literal}');
so.addVariable('width','320');
so.addVariable('autostart','false');
so.addVariable('overstretch','false');
so.addVariable('showvolume','true');
so.addVariable('enablejs','true');

// Very important to use the js loadFile() and sendEvent() funtions
so.addVariable('javascriptid','mpl');
so.addVariable('type','flv');
so.write('player');
</__script>
{/literal}

// A Little bonus to show the parameters and state of the player (ginven by the player which id is 'pid')
<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>

/***************END*************/

8- you can now embed this in your pages using two functions :
First to show your videos,
{cms_module module='FLVPlayer' mode="summary" sort="name_asc"}

then to show the player :
{cms_module module='FLVPlayer' mode="detail"}

I hope it will help !!

[cyberman]

Thank you for this solution !!!

[jd447]

VINC... you are absolutly fabulous! works great!

thanks mate,

jd

[jd447]

one more question!

is it possible to have a thumbnail in the summary list for each video?
i mean actually the same JPG file that is displayed in the player.
i tried a lot of different stuff... unfortunatly i'm bloody designer!

jd

[vinc]

I think you must create this file...

The JW player is not designed to create such a jpeg file from your video

Is that what you needed ?

[jd447]

mhmm... no actually i meant, to be able to use the jpg file (that as the same name as the flv) as a thumbnail in the summary template.

for ex: http://www.adena.ch/index.php?page=how-cmsms-works
if you click on "think" you get the jpg file loading in the player first. so, i would like to use this same jpg file as a thumbnail next to link.(on the right side)

i hope i was clear enough,

jd

[vinc]

Ok, I understood...

Maybe in the summary template, you can use something like at the end (inside {foreach}{/foreach}):

Code: Select all

<img src="{$flvurlprefix}/{$entry->name}.jpg">

Which will show the picture...

or this which will show the picture and add an hyperlink on it...

Code: Select all

 <p class="showValue"><a href="javascript:newMovie('{$flvurlprefix}','{$entry->name}',{$entry->id},'{$entry->slash_title}','{$entry->slash_description}','{$entry->created|date_format}','{$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">

</a></p>

It works for me

[jd447]

it's exactly that... jeez, you're good!

thanks mate!

[jd447]

one more thing. (i feel like steve jobs! )

how are the "item data" managed? i see it's calling the "nodes". is it possible to change that stuff, with per example the "description"?

i'm sorry, my programming skills are really low... but i feel that i'm improving!

[pumuklee]

hi vinc

i do the same things what you described here
but if i want to save a video into the list
i become this error

Fatal error: Call to a member function DeleteWords() on a non-object

any idea?

thanks

[vinc]

jd447 :

According to the player homepage stuff (more precisely the javascript stuff.. found here http://www.jeroenwijering.com/extras/readme.html)
you can only parse with js the following elements :
file, title, link, id, image, author, captions, audio, category, start, and type.

It is not possible to get the description by loading a video from a link as far as i can do...

pumuklee

Could you provide more info. What about saving a video into the list ? (sorry i don't understand what you mean)

(the best is a link for me to test... you can send it in pm if you prefer)

See ya !

Vin'c

[pumuklee]

hi vinc

i solved the problems
but now i have another one

i gave into the settings not an absolute path for player and files
i gave a relative because just in this way is working

modules/flvplayer

uploads/films

my problem is that the jpg image is loaded into the player
but when i start to play the film is not loaded

any idea?

thanks

[vinc]

Not really...

If you are using player v3.9, you can add (but this is the default)

Code: Select all

// A bonus too to show what is loaded in the player
<ul id="data"></ul>

Which will get from the player  some informations about the file, image and so on...

Have a look at this... And keep in touch !

[deejmer]

The tutorial provided is great, as this module seems to have much functionality, but little documentation.  I have the following setup:
CMSMS version 1.2.2 "Holetown"
Running MySQL and Apache versions 5.x
server: Ubuntu Linux 6.10 - Server Edition

I downloaded JW version 3.13 (the only one available on the JW site), uploaded the two files as indicated in vinc's instructions:

All you have to do to get it work is :
1- It requires the CGExtensions module so install this module first for your Cmsms install  (Did this)
2- Install the FLVPlayer module  (Did this)
3- get the last version (at least 3.9) of the JW FLV PLayer (http://www.jeroenwijering.com/?item=JW_FLV_Player)  (Did this, was version 3.13)
4- Extract the zip file and copy the files flvplayer.swf and swfobject.js to your web server (maybe in the /modules/FLVPlayer/JWFLVPlayer directory to get things ordered)  (Did this)
5- Add permission to some users/groups to manage FLV Files (in Admin -> Users -> Permissions)  (Did this)
6- Go and get to Admin -> Content -> Flash Video Manager  (Did this)
6.1- Create at least a member and a group  (Did this)
6.2- add some videos to your install  (Did this)
6.3- update the paths to your files like : 
FLV File URL Prefix:  http://www.mydomain.tld/path/to/my/videos  (Did this)
FLV Player URL: http://www.mydomain.tld/path/to/my/player  (Did this)
I updated the Summary and Detail templates per the instructions as well.

When I embed the module in a page as instructed, I get some very odd output.  You can take a look here: http://www.monzyk.com/index.php?page=videos.  I'm a little lost on what's going on here...can someone help?

Thanks!