With a lot of help from Hobbs, I now have a successful rtmp stream to a flv player on my site, for instance here:
http://www.rossiterandco.com/VideoProductionIntro.htm
Now, at the end of the video, I'd like some text, and three links to appear.
So for instance, it'd say
Are you interested in:
> web video
> training video
> marketing video
With the three bullets being links to pages in my site (NOT videos).
Any suggestions as to how would I go about doing this?
Many thanks, Linda
Ok, ideally:
I'd like the links to appear over the image at the end of the video.
So I'd need the whole image to go darker (I guess by putting a 70% transparent black over it.)
I've mocked something up here: http://www.rossiterandco.com/images/videoclick.jpg
(But of course I'm open to compromise...)
I'd be so impressed if you could solve this... my partner is looking at buying another player to get this function, but I was convinced it could be done here!
btw: Yes, I liked your play button... I took it and put it in the multiple player page you just fixed - much better than my midnight effort!
Linda
Yeah, it's quite easy, because we're already listening for the STATE=COMPLETION to restore the image, so it would just be a case of putting the opaque overlay over the original image, then the links over that.
Give me a couple of days, because it's our Thanksgiving and I have dinners and kids home, and such.
See: http://willswonders.myip.org:8074/Rossiter-4.html
You can style the links with the CSS.
Four code changes:
1)
div.overlaidlinks
{
padding: 20px;
font-weight: bold;
font-size: .8em;
background-repeat: no-repeat;
} div.overlaidlinks p
{
width: 60%;
padding: 3px 5px 3px 5px;
color: #000000;
background-color: white;
opacity: 0.60;
filter: alpha(opacity = 60);
}
2)
function loadPlayer(videofile, imagefile, width, height, playerid, link1, text1, link2, text2, link3, text3)3)
//...create new div contents
currentDivContents = '<div class="overlaidlinks" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;"> \
<a href="' + link1 + '"><p>' + text1 + '</p></a> \
<a href="' + link2 + '"><p>' + text2 + '</p></a> \
<a href="' + link3 + '"><p>' + text3 + '</p></a> \
</div>';4)
<div class="clickme" style="background-image:url('videoplayer/images/AFC_long.jpg');width:400px;height:244px;" id="playerid1" onclick="loadPlayer('popup/AFC_long.flv', 'videoplayer/images/AFC_long.jpg', 400, 244, 'playerid1', 'http://www.google.com', 'Go to Google?', 'http://www.yahoo.com/', 'Go to Yahoo!', 'http://www.msn.com/', 'Go to MSN');">Well, it's more like 40 code changes now...
Hobbs, Brilliant - I'm off to study this.
One question: With or without the new caption code:
On my site I've got some places where I only need one video, say here: http://www.rossiterandco.com/VideoProductionIntro.htm
And some where I need a number of videos, say here: http://www.rossiterandco.com/CorporateVideoExamplesMarketing_new.htm
(All this code was written by you).
Now, I understand that the page with a number of videos doesn't load a player until an image is clicked.
So the question is: Should I use this multi-video code even on the single video page?
If the answer is no (so the single player code is OK) then can you adapt this caption stuff (Brilliant, btw!) to a single video page?
Huge thanks, Linda
I would say use the multi-player solution on all of your pages.
A) You only have one method to be familiar with.
B) You only have one set of CSS to adjust if you want to change the appearance (specific cases can be adjusted with inline CSS tweaks).
C) You only have one JavaScript file to adjust if you want to change the player's behavior (you can minify the JS with Yahoo!'s minifier for faster loading and better performance — although not instantiating ANY players on page load is a huge boost already!)).
D) Eventually, when things are working to your liking (CSS appearance, CSS reconciled with any other CSS that you are using, player behavior, other "stuff"), you should move the CSS and JavaScript to external files that are loaded like this:
<head><script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('swfobject', '2.2');
</script>
<link rel="stylesheet" href="videoplayer/player.css" type="text/css" />
</head>
<body>
<script src="videoplayer/player.js"></script>
<!-- somewhere in the body... tds for the players -->
<td>
<!-- video player code -->
</td>
<body>
@hobbbs
Always impressed when I see the nifty stuff you create. I started picking through this effort on your part with an eye to making a few small changes to fit into my needs. I've managed to get everything tweaked with one exception.
I've added another link/text pair with the intent to let a user Email a link to the page to a friend. Hope you can tell me what I need to adjust to get it working. The "loadPlayer is my stumbling block it is changing the link and I haven't been able to work around it
<strong> currentDivContents = '<div id="' + currentPlayerID + '" class="overlaidimage" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;"><div class="overlay"></div><div class="overlaidlinks' + size + '" style="top:-' + height + 'px;"> <p>A few useful links:</p><a href="' + link1 + '">> ' + text1 + '</a><br /><a href="' + link2 + '">> ' + text2 + '</a><br /><a href="' + link3 + '">> ' + text3 + '</a><br /><br /><a href="' + link4 + '">> ' + text4 + '</a><div><a href="#" class="playagain" onclick="loadPlayer(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');">Play this video again</a></div></div></div>';<div id="playerid1" class="clickme" style="background-image:url('jwboxtest.png');width:300px;height:100px;" onclick="loadPlayer(videofile, 'jwboxtest.png', 720, 510, 'playerid1', 'http://msdn.microsoft.com/en-us/library/default.aspx', 'Microsoft - Developers Network', 'http://www.adobe.com/', 'Adobe - Web Development Tools', 'http://www.techsmith.com/', 'Techsmith - Camtasia, Snagit and other great tools', 'http://mailto:?subject=Here is a Video Link', 'Email a friend a link to this Video');"></div></strong>
It's replacing the colon with a slash (see pic)<strong>http://jim.playourvideo.net/slash.jpg</strong>Regards Jimb
I'm looking...
mailto: is a pseudoprotocol, like javascript: so you don't need the http://
'mailto:?subject=Here is a Video Link', 'Email a friend a link to this Video'See the third video on the Test Page here: http://willswonders.myip.org:8074/Rossiter-4.html
hobbs,
Thank you again. The only thing I can think some might like is adding a close link to delete the overlay and expose the original clickable image.
Remarkable code my friend.
Jim
thanks (getting the CSS right almost ruined me :D)
a close button sounds like a reasonable option
(maybe the "Close X" image used with the JW Box)
i'll add it to one of the videos on the Test Page later today (gotta run now!)
Hobbs, I'm struggling a bit - hopefully something simple.
First I took a page with a single video, and put in the multi-player solution. I think it works fine: http://www.rossiterandco.com/VideoProductionIntro_01.htm
Then I took the same page and added in the end caption stuff (the style is now in a separate stylesheet)
http://www.rossiterandco.com/VideoProductionIntro_02.htm
But, when I click the play button, I get a popup alert. I hope you see it too. (If not, I'll send a screen grab)
So I then took your code exactly as it was on your site, and uploaded it here:
http://www.rossiterandco.com/hobbs01.htm
Again I get the popup alert.
What am I doing wrong?
(Smaller matter, but how do I get the control bar back under the video, not over it?)
Many thanks, Linda
Based on his last message to me, I think hobbs had a few things to do so, in your loadPlayer function you'll see this line.
<strong>alert(videofile + '\n' + imagefile + '\n' + width + '\n' + height + '\n' + playerid + '\n' + link1 + '\n' + text1 + '\n' + link2 + '\n' + text2 + '\n' + link3 + '\n' + text3 + '\n' + link4 + '\n' + text4);
</strong>Just comment that out should do the trick.
Jimb
Great - that did it, and I got the control bar in the right place too.
This is excellent - v2 now works: http://www.rossiterandco.com/VideoProductionIntro_02.htm
Next step (sorry, please all appreciate I'm not a programmer, I'm a video editor, so I'm learning as fast as I can:)
I understand that part of this code can go in a .js file.
But so far my efforts are failing.
I've been removing the code from line 323, starting <script type="text/javascript">
to line 436, and putting it in a file videoplayer/videoplayer.js as seen here: http://www.rossiterandco.com/videoplayer/videoplayer.js
The only line I changed was near the end "swfobject.embedSWF('player.swf',... as they're now at the same level.
Having removed this code, I saved a new version, http://www.rossiterandco.com/VideoProductionIntro_03.htm
Then in this, at line 322, I put
<script src="videoplayer/videoplayer.js"></script>
Now uploaded, nothing happens.
Advice, please! Linda
btw - how do you get your code in blue boxes on these forum threads?
@Linda
You should remove the <script>.. and ..</script> from your .js file and the <style>... and ...</style> lines from your .js & css files.
You might find this link useful. I wouldn't buy their service simply because their technology is a bit stale dated but I do use it as a first pass html checker when I've been in a hurry to code something. It does catch "most" errors and I particularly like the loadtime summary.<strong>http://www.netmechanic.com/products/HTML_Toolbox_FreeSample.shtml</strong>Here's a peek at a page loadtime summary.<strong>http://jim.playourvideo.net/loadtimes.jpg</strong>The recap is for this work in progress generic player page.<strong>http://jim.playourvideo.net/lvideo.htm?id=17.flv</strong>Regards - Jimb
WHEW!
Looks like it works. (I don't know how the hell that happened!)
@Linda,
I moved the controlbar to over because otherwise the opaque black background hung down 20px below the image (where the controlbar was) when the links were showing — and it looked UGLY.
However in the course of developing the CSS I saw a way to constrain the black background so it doesn't hang down below the image.
Find this in currentDivContents<div class="overlay">
and change it to<div class="overlay" style="height:' + (height - 20) + 'px">
You might also want to tweak the CSS
div.overlaidlinkssmall p
{
margin: 0;
padding: <strong>10px</strong> 0 0 10px;
font: normal normal bold .8em arial,sans-serif;
}Once you get the JavaScript into an external file and it works, use the Yahoo Compressor to minify it. Be sure that you keep a copy of the un-minified code.
http://developer.yahoo.com/yui/compressor/
The JavaScript will be smaller, load faster, and run better.
Sorry about the alerts, they're just there for annoyance value — I see they worked. (Seriously, if you get some code with an alert, just search for "alert" and comment it out or delete it.)
The code tags are the "<>" immediately below the text-entry box or just type [c ode]code goes here[/c ode] (without the space between the "c" and the "o" — I don't want the Forum to really interpret them as code tags.)
@Jimb,
Check out this tool for tracing: http://ejohn.org/blog/deep-tracing-of-internet-explorer/?
OK, I've changed the overlay class - that works well.
The css is in a separate file:
http://www.rossiterandco.com/stylesheets/videoplayer.css
But I'm still stuck, no doubt doing something very stupid.
With all the video code in the htm page, it works fine:
http://www.rossiterandco.com/VideoProductionIntro.htm
But when I put part of it into the .js file, it no longer works.
http://www.rossiterandco.com/VideoProductionIntro_03.htm
http://www.rossiterandco.com/videoplayer/videoplayer.js
Can either of you see what I'm doing wrong?
I'm so grateful for this help!
You had some extraneous garbage (script tags, HTML comment tags, etc.) in your JavaScript file.
var player = null;
var playlist = null;
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addModelListener('STATE', 'stateMonitor');
}
else
{
setTimeout("addListeners();", 100);
}
};
function stateMonitor(obj)
{
if(obj.newstate == 'COMPLETED')
{
if(currentDivContents != '')
{
gid(currentPlayerID + 'o').innerHTML = currentDivContents;
}
}
};
function gid(name)
{
return document.getElementById(name);
};
var currentDivContents = '';
var currentPlayerID = '';
function loadPlayer(videofile, imagefile, width, height, playerid, link1, text1, link2, text2, link3, text3, link4, text4)
{
//...if a player is already loaded,
//...remove the player and restore it's div contents
if(currentDivContents != '')
{
swfobject.removeSWF('playerID');
gid(currentPlayerID + 'o').innerHTML = currentDivContents;
}
//...save current playerid
currentPlayerID = playerid;
//...create new div contents
if(width > 320)
{
var size = 'large';
}
else
{
var size = 'small';
}
currentDivContents = '<div id="' + currentPlayerID + '" class="overlaidimage" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;"><div class="overlay" style="height:' + (height - 19) + 'px"></div><div class="overlaidlinks' + size + '" style="top:-' + height + 'px;"><br /><p>Click to discover more:</p><br /><a href="' + link1 + '">» ' + text1 + '</a><br /><br /><br /><a href="' + link2 + '">» ' + text2 + '</a><br /><br /><br /><a href="' + link3 + '">» ' + text3 + '</a><br /><br /><br /><a href="' + link4 + '">» ' + text4 + '</a><div><a href="#" class="playagain" onclick="loadPlayer(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');">» Replay</a></div></div></div>';
var flashvars =
{
'streamer': 'rtmpt://draco.streamingwizard.com:80/streamingvideo123/',
'file': encodeURIComponent(videofile),
'type': 'rtmp',
'image': encodeURIComponent(imagefile),
'controlbar': 'bottom',
'plugins': 'gapro-1',
'gapro.accountid': 'UA-229582-1',
'gapro.trackstarts': 'true',
'gapro.trackpercentage': 'true',
'gapro.tracktime': 'true',
'backcolor': '333333',
'frontcolor': 'CCCCCC',
'lightcolor': '62A9F0',
'screencolor': 'FFFFFF',
'id': 'playerID',
'autostart': 'true'
};
var params =
{
'allowscriptaccess': 'always',
'allowfullscreen': 'false'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('player.swf', playerid, width, height, '9.0.124', false, flashvars, params, attributes);
};
Normal file: http://willswonders.myip.org:8074/videoplayer.js
Minified file: http://willswonders.myip.org:8074/videoplayermini.js
hmm... I changed the .js file to the above - something now happens - the video goes white.
(but doesn't play).
http://www.rossiterandco.com/VideoProductionIntro_03.htm
Sorry....
Usually a white screen means that the path to the player file is incorrect.
I think yours should be:swfobject.embedSWF('<strong>/videoplayer/player.swf</strong>', playerid, width, height, '9.0.124', false, flashvars, params, attributes);
Adjust if necessary.
Good morning hobbs
Bad day at black rock here. The power supply on my RAID server decided to die so my files, while streaming via Wowza, are mostly not available today. I just didn't want to take the time to go over and get the backups which are stored off site. In the meantime I have to make due with some old stuff I had laying around
Great job on the close feature. I've implmented things and it works great. One thing I did note is that if I play a file fullscreen that when it reaches the COMPLETED state the image displayed is the original thumbnail image rather than the overlay. I added a this.window.focus() statement so that it drops out of fullscreen and works as expected.<strong>http://jim.playourvideo.net/lsvideo.htm?id=plugins.mp4</strong>
Thanks for the tip on a better html code checker. I looked at the Yahoo minify (YUI ?) briefly but saw no instructions or links to instruction to install the program. Any insight? also it would be useful to know which options you typically use when running it and why. Things have pretty much solidified in my code and I'd like to have a go at compressing .js and css files.
Jimb
Yeah, I know how that goes. I lost a 400GB full of media the other day. Luckily, I have lots of them, so I swapped the circuit board and retrieved the files onto a new 1TB drive. Finally kicked me in the posterior to put 4 1TB drives in the NAS box so I could mirror the drives, instead of running naked with no backup of the media files. I have RAID on all of my servers, but needed the space of 4 400GB drives on the NAS. Now with 1 or 1.5TB drives, I can finally mirror (and sleep at night).
I'll check the behavior in fullscreen when COMPLETED. On another page (JW Box), I noticed that the window.focus() doesn't work in Firefox. The only way that I could get the browser to drop out of fullscreen was to re-instantiate the player. I need to do some more tests because re-instantiating isn't acceptable to me.
For the Yahoo! Compressor, go to:http://developer.yahoo.com/yui/compressor/
Command line instructions are down the page a bit.
I just unpack the zip into a directory, like the default yuicompressor-2.4.2
Then drop your JavaScript files into: yuicompressor-2.4.2/build and run a batch file or command line like this:
java -jar yuicompressor-2.4.2.jar -v videoplayerR-5.js -o videoplayerR-5mini.jsYou will usually see a few warnings and hints for improving your code — which I usually ignore — there are some things I do for readability, that I don't want to change. Copy the minified file to your server and you're good to go!
I minified the files for: http://willswonders.myip.org:8074/Rossiter-4.html and http://willswonders.myip.org:8074/Rossiter-5.html with no problems.
Now I'm puzzled...
Try: http://willswonders.myip.org:8074/Rossiter-5.html
In fullscreen, when it reaches the end, it drops out of fullscreen, because the player object element is replaced by currentDivContents, and the correct image and overlaid links are displayed.
What are you seeing???
Not sure when you posted OR if you've made further revisions but for me I see normal behavior in FF but in IE8 fullscreen remains and the original image is displayed??? I cleared the cache before each test. 1:28 MDT
Jimb
Thanks for bringing me up to speed on Yahoo's yui. Worked exactly as you described it. I suspect that I may not be the oly 60+ year old fool trying to come to grips with issues like this so I think I'll create a tutorial on this for other that would like to tweak page load times too.
Ha! Don't feel bad — I'm a 62yro fool trying to stay ahead of this "stuff".
The most significant improvement in page load comes from not loading or instantiating ANY players on initial page load — just some small images. Then, sometime after the page is loaded and rendered, if the user clicks on a video, the player is loaded and instantiated. It really makes a difference when there are many players, like on the Editors Choice site, there were 104 players on one page.
Running JavaScript through the YUI Compressor (Minifier) not only compresses the code, but makes many changes in the code for faster execution, which is the real improvement.
I haven't checked Rossiter-5.html in Internet Explorer with fullscreen (the original code for Rossiter had allowfullscreen=false, I guess because she didn't want fullscreen to be available for her users), so I'll do that later today after the "turkey stuff" is over.
Happy Thanksgiving
Thanks so much - it's now working!
I've set the full screen option to false for the moment - I found that in IE8 at the end it remained full screen with the image file, but when I minimised it, it made a mess of the existing page.
In Chrome at the end of full screen it automatically went back to it's original size, but the play area was white.
If you find a solution to this, please post it, as it'll be my next challenge.
But for now I need to get this code running throughout the site.
One question - one my home page only I have a different video setup. the video automatically plays.
I've duplicated it with the new code here (linking it to a different .js file to get rid of the control bar)
http://www.rossiterandco.com/index_video.asp
How do I make it automatically play?
Of even play after a delay of 5 seconds?
Thanks, Linda
To start the player on page load, put the same thing in the <body onload=""> as you have in the onclick()
<body onload="loadPlayer('webpage/index_rco.flv', 'videoplayer/images/RCoHome.jpg', 475, 240, 'playerid1', 'videoproductionintro.htm', 'Corporate video & DVD', 'multimediapresentationgallery.htm', 'Multimedia presentation', 'webservicesUK.htm', 'Custom web design', 'WriteBrief01.aspx', 'Write, or call 0845 366 4131');">Add it to all the other stuff that you already have in the onload()
<body bgcolor="#ffffff" onLoad="MM_preloadImages('images/index05_button_home_f2.gif','images/index05_button_news_f2.gif','images/index05_button_services_f2.gif','images/index05_button_customers_f2.gif','images/index05_button_us_f2.gif','images/index05_button_multimedia_f2.gif','images/index05_button_video_f2.gif','images/index05_button_web_f2.gif','images/index05_button_animation_f2.gif','images/index06_button_lead_f2.gif','images/index06_search_f2.gif','images/index_button_ask_f2.gif','images/index_button_qanda_f2.gif','images/index_button_infocentre_f2.gif','images/index05_button_contact_f2.gif','images/index06_subscribe_f2.gif','images/index_bulletvideo_f2.gif','images/index_bulletmultimedia_f2.gif','images/index_bulletweb_f2.gif','images/index05_videogallery_f2.jpg','images/index05_multimediagallery_f2.jpg','images/index07_city2.jpg','images/index05_flashgallery_f2.jpg','images/wellness_f2.jpg','images/VDU_f2.jpg'); if (typeof PageInit == 'function') PageInit(); <strong>loadPlayer('webpage/index_rco.flv', 'videoplayer/images/RCoHome.jpg', 475, 240, 'playerid1', 'videoproductionintro.htm', 'Corporate video & DVD', 'multimediapresentationgallery.htm', 'Multimedia presentation', 'webservicesUK.htm', 'Custom web design', 'WriteBrief01.aspx', 'Write, or call 0845 366 4131');</strong>">I think we have all of the fullscreen issues worked out in FF, IE, and GC.
Sorry, I think I'm missing something there.
I copied the stuff into the "body onload" section in the header.
But what do I change in the video area itself?
Thanks, LInda
The code in the onload is all that should be needed.
Basically you're going to be doing the equivalent of clicking on the video.
Ok, got that now.
Can you see what's going wrong here?
Tracing the steps:
We got the player and captions working on a single page here:
http://www.rossiterandco.com/Video_caption.htm
Then we extracted some of the code to a js file, to create this:
http://www.rossiterandco.com/Video_caption_js.htm
with
http://www.rossiterandco.com/videoplayer/videoplayercaption.js
I've been testing in Chrome, which works fine with both pages
However, in IE, in both pages, when it gets to the end, the Replay button is way down the page, with a big white space.
(I'd been messing around with the css, and thought it was that, but I went back to your original and it still looks awful.)
To make testing easier, I took your code (to eliminate any rubbish I'd built in) and put it within my page here:
http://www.rossiterandco.com/VideoProductionIntro_ie.htm
Sorry, Linda
@hobbs
Yet another wrinkle on this theme. I want to be able to pass either a single file OR a playlist to the player in a generic player page. Problem is when I pass a playlist it plays only the 1st file the displays the overlay. You did show me how to do this in a page that only accepts a playlist and it works great but I would really prefer that just 1 generic page be to handle both circumstances. Here's the appropriate snippet of the code I have.
<strong> var player = null;
var playlist = null;
var currentItem = -1;
var videofile = swfobject.getQueryParamValue('id'); function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if((playlist !== null) && (playlist.length > 0))
{
player.addModelListener('STATE', 'stateMonitor');
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("addListeners();", 100);
}
};
function itemMonitor(obj)
{
if(obj.index != currentItem)
{
videofile = gid('location').innerHTML = playlist[obj.index]['location'];
}
};
function stateMonitor(obj)
{
if(obj.newstate == 'COMPLETED')
{
this.window.focus();
if(currentDivContents != '')
{
gid(currentPlayerID + 'o').innerHTML = currentDivContents;
}
}
};
function gid(name)
{
return document.getElementById(name);
};
</strong>
Regards - Jimb
To use a playlist:
1) If you're using an RTMP server, then you will have to change the type to use a playlist. Add this just before the flashvars.
if(videofile.match('.xml'))
{
var type = '';
}
else
{
var type = 'rtmp';
}2) Change the type flashvar to the type JS variable and add the repeat flashvar so the player advances to the next item in the playlist.
var flashvars =
{
'streamer': 'rtmp://12.173.115.50/oflaDemo',
'file': encodeURIComponent(videofile),
<strong>'type': type,</strong>
'image': encodeURIComponent(imagefile),
'controlbar': 'over',
<strong>'repeat': 'list',</strong>3) In the JavaScript, add a currentItem variable, add a timeout variable, add an ITEM Listener, change the stateMonitor function, add an itemMonitor function, and add the replaceDiv() function.
The stateMonitor() function gets more complex because we have to use a timeout when switching tracks (the state is IDLE for a moment), to avoid replacing the player when it is switchng tracks.
var player = null;
var playlist = null;
<strong>var currentItem = null;</strong>
<strong>var timeout = null;</strong>
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addModelListener('STATE', 'stateMonitor');
<strong>player.addControllerListener('ITEM', 'itemMonitor');</strong>
<strong>itemMonitor({index:0});</strong>
}
else
{
setTimeout("addListeners();", 100);
}
};
<strong>function stateMonitor(obj)
{
if((obj.newstate == 'COMPLETED') && ((currentItem + 1) == (playlist.length)))
{
replaceDiv();
}
else if(obj.newstate == 'IDLE')
{
timeout = setTimeout("replaceDiv();", 250);
}
else if((obj.newstate == 'PLAYING') || (obj.newstate == 'BUFFERING'))
{
clearTimeout(timeout);
}
};</strong>
<strong>function replaceDiv()
{
if(currentDivContents != '')
{
window.focus();
swfobject.removeSWF('playerID');
gid(currentPlayerID + 'o').innerHTML = currentDivContents;
}
};</strong>
<strong>function itemMonitor(obj)
{
currentItem = obj.index;
};</strong>
function gid(name)
{
return document.getElementById(name);
};
var currentDivContents = '';
var currentPlayerID = '';
function loadPlayer(videofile, imagefile, width, height, playerid, link1, text1, link2, text2, link3, text3, link4, text4)
{
//...if a player is already loaded, remove the player and restore it's div contents
if(currentDivContents != '')
{
swfobject.removeSWF('playerID');
gid(currentPlayerID + 'o').innerHTML = currentDivContents;
}
//...save current playerid
currentPlayerID = playerid;
//...create new div contents
if(width > 399)
{
var size = 'large';
}
else
{
var size = 'small';
}
currentDivContents = '<div id="' + currentPlayerID + '" class="overlaidimage" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;"><div class="overlay"></div><div class="overlaidlinks' + size + '" style="top:-' + height + 'px;"> <p>Click a link to read more about:</p><a href="' + link1 + '">> ' + text1 + '</a><br /><a href="' + link2 + '">> ' + text2 + '</a><br /><a href="' + link3 + '">> ' + text3 + '</a><br /><br /><a href="' + link4 + '">> ' + text4 + '</a><div class="playagain"><img class="closelabel" src="closelabel.gif" width="42" height="14" onclick="reWrite(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');" /><a href="#" class="playagain" onclick="loadPlayer(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');">Play this video again</a></div></div></div>';
/*
currentDivContents =
'<div id="' + currentPlayerID + '" class="overlaidimage" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;">
<div class="overlay">
</div>
<div class="overlaidlinks' + size + '" style="top:-' + height + 'px;">
<p>Click a link to read more about:</p>
<a href="' + link1 + '">> ' + text1 + '</a>
<br />
<a href="' + link2 + '">> ' + text2 + '</a>
<br />
<a href="' + link3 + '">> ' + text3 + '</a>
<br />
<br />
<a href="' + link4 + '">> ' + text4 + '</a>
<div class="playagain">
<img class="closelabel" src="closelabel.gif" width="42" height="14" onclick="reWrite(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');" />
<a href="#" class="playagain" onclick="loadPlayer(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');">Play this video again</a>
</div>
</div>
</div>';
*/
<strong>if(videofile.match('.xml'))
{
var type = '';
}
else
{
var type = 'rtmp';
}</strong>
var flashvars =
{
'streamer': 'rtmp://12.173.115.50/oflaDemo',
'file': encodeURIComponent(videofile),
<strong>'type': type,</strong>
'image': encodeURIComponent(imagefile),
'controlbar': 'over',
<strong>'repeat': 'list',</strong>
'backcolor': '333333',
'frontcolor': 'CCCCCC',
'lightcolor': '62A9F0',
'screencolor': 'FFFFFF',
'id': 'playerID',
'autostart': 'true'
};
var params =
{
'allowscriptaccess': 'always',
'allowfullscreen': 'true'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('/videoplayer/player.swf', playerid, width, height, '9.0.124', false, flashvars, params, attributes);
};
function reWrite(videofile, imagefile, width, height, playerid, link1, text1, link2, text2, link3, text3, link4, text4)
{
gid(playerid + 'o').innerHTML = '<div id="' + playerid + '" class="clickme" style="background-image:url(\'' + imagefile + '\');width:' + width + 'px;height:' + height + 'px;" onclick="loadPlayer(\'' + videofile + '\', \'' + imagefile + '\', \'' + width + '\', \'' + height + '\', \'' + playerid + '\', \'' + link1 + '\', \'' + text1 + '\', \'' + link2 + '\', \'' + text2 + '\', \'' + link3 + '\', \'' + text3 + '\', \'' + link4 + '\', \'' + text4 + '\');"><img class="play" src="videoplayer/images/PlayButtonSquare70.png" width="40" height="40" /></div>';
};
A simple RTMP playlist.
<?xml version='1.0' encoding='UTF-8'?>
<playlist version='1' xmlns='http://xspf.org/ns/0/' xmlns:jwplayer='http://developer.longtailvideo.com/trac/wiki/FlashFormats'>
<trackList>
<track>
<title>Things Fall Apart</title>
<creator>Devoid of Yesterday</creator>
<location>ThingsFallApart</location>
<image>/videoplayer/images/ThingsFallApart.jpg</image>
<meta rel='streamer'>rtmp://12.173.115.50/oflaDemo</meta>
<meta rel='type'>rtmp</meta>
</track>
<track>
<title>The Silent City</title>
<creator>Ruairí Robinson</creator>
<location>TheSilentCity</location>
<image>/videoplayer/images/TheSilentCity.jpg</image>
<meta rel='streamer'>rtmp://12.173.115.50/oflaDemo</meta>
<meta rel='type'>rtmp</meta>
</track>
<track>
<title>Little Man, The Way Girls Are</title>
<creator>Esben Tonnensen</creator>
<location>Little Man, The Way Girls Are</location>
<image>/videoplayer/images/Little Man, The Way Girls Are.jpg</image>
<meta rel='streamer'>rtmp://12.173.115.50/oflaDemo</meta>
<meta rel='type'>rtmp</meta>
</track>
</trackList>
</playlist>Hobbs,
I've tried everything I can think of, but I'm not getting anywhere.
This works in Chrome but not IE.
http://www.rossiterandco.com/Video_caption_test.html
Can you point me in the right direction?
Thanks, Linda
@hobbs
You really produce some amazing code. I genuinely appreciate all the help over the last few days. I finally have everything on my site working the way I wanted. I've learn so much in the last few days.
Thanks Once Again - JIm
@Jim,
Thanks for the compliments — it's a lot of fun and challenging for me — keeps the neurons firing!
@Linda,
I'm a bit bogged down in a project today, but as soon as it's wrapped up, I'll look at your page.
@Linda,
Something is wrong with your player.swf file.
When I use your code, but my player.swf v4.7.679 it works.
http://willswonders.myip.org:8074/Rossiter-6.html
Get a new player here:
http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf
Click on the release that you want in the Rev column.
Hobbs, I've uploaded the new player.swf (though I really need a registered version) but it still doesn't seem top solve the problem:
http://www.rossiterandco.com/Video_caption_test.html
Still jumps at the end.
Argghhh...... Linda
Your video seems to play OK for me.
What exactly do you mean by, "Still jumps at the end."?
Also, I never can connect to your server using rtmpt. I always have to change it to rtmp.
It plays fine, but get to the captions at the end - the replay button appears several inches down the screen.
Only in IE though - in Chrome it's fine.
Here's a screengrab of what I see...
http://www.rossiterandco.com/replayerror.htm
UPDATE: I worked out that it was something conflicting with something else in my site template. If I removed it from the template it was fine.
After hours of testing, I found this:
I had to add this line to the very top of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>That made it work - why?
Browsers have different modes that make them comply with the standards to varying degrees.
I always use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Hobbs,
I feel I'm close to what I'm after, but:
> My lack of programming ability is holding me back
> You've given a lot of time and effort, and I've probably used up all your goodwill.
So, would you be interested in coming to a financial arrangement to complete our requirement?
I'd be happy to pay you to get the job done right.
I can't see a Private messaging service here, but you can email me : linda at rossiterandco.com.
Please let me know if you're interested.
Thanks, Linda
Ok, I've tried so hard over the holiday, but I'm stumped.
The problem is that I need to add this w3 compliance code to make the interactive screen at the end of the video appear properly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
But, when I add this code, it affects the look of my header - large white horizontal spaces appear.
Here's without the code (header visually correct, no w3 code):
http://www.rossiterandco.com/VideoProductionIntro.htm
And with it (w3 code, header visually wrong):
http://www.rossiterandco.com/VideoProductionIntro_test.htm
Any suggestions welcome, before I quit and put the whole thing on elance!
Linda
Where do you want the links to appear?
Over the image that replaces the player at the end of the video?
Above or below the image?
Somewhere else?
The links would just be sent along with the other parameters when the createPlayer() function is called, then after the video, they would be displayed wherever...
Did you see the semi-transparent Play Button? What do you think of it? I'm trying to indicate that there is a video to be played by clicking on the image, but not make it too obtrusive. I've also looked at positioning the Play Button in in the upper-left corner with 10~20px margins.