Hi,
This might have been answered already but I'm a bit of a novice to this. I have a flv video embedded into page.
Underneath, I want to place 3 different links (to 3 different FLV videos) that when clicked, changes the video being played on that initial video..
Thanks.
before the head tag:
<script type='text/javascript' src='swfobject.js'></script>
then on the page:
<p id='preview'>Video 1</p>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','277','187','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video1.flv');
s1.write('preview');
</script>
What I am looking for is basically this first video is on the page and u can click to load it.
underneath the video, I want to put 3 more links (lets say video 2 through video 4. They can be regular links one underneath the other.
Thanks.
See this post: http://www.longtailvideo.com/support/forum/Feature-Suggestions/2756/Multiple-playlists-a-Success-#ms...
The last button shows how to load a single file.
You can include all of the File Properties when you load a file.
Reference for File Properties: http://developer.longtailvideo.com/trac/wiki/FlashVars#Fileproperties
I think I went to that post earlier. It just confused me. Is there a simple solution to just get these 3 links to change the initial video when clicked?
Thanks a bunch.
Is there anything specific I need to look for in that post? A lot of it is confusing to me.
Is it difficult to do what I am asking?
Thanks.
This is about as simple as it can be made.
Choose the method of adding the file, that you want to use. There are examples of an anchor element, an image element, and a button element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Simple Add Item - JWMP v4.4.x - swfobject v2.1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var flashvars =
{
'file': 'video.flv',
'frontcolor': '86C29D', // text & icons (green)
'backcolor': '003367', // playlist background (blue)
'lightcolor': 'C286BA', // selected text/track highlight (red)
'screencolor': 'FFFFFF', // screen background (black)
'id': 'playerId',
'autostart': 'false'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'playerId',
'name': 'playerId'
};
swfobject.embedSWF('player.swf', 'player', '320', '240', '9.0.124', false, flashvars, params, attributes);
</script>
<script type="text/javascript">
var player = null;
function playerReady(obj)
{
player = gid(obj.id);
};
function gid(name)
{
return document.getElementById(name);
};
</script>
</head>
<body>
<div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>
<a href="#" onclick="player.sendEvent('LOAD', {file:'video3.flv'}); return false;">LOAD Video 1</a>
<img onclick="player.sendEvent('LOAD', {file:'video3.flv'});" src="image01.jpg" width="80" height="60" alt="Image 01" title="LOAD Video 2" style="cursor:pointer">
<button onclick="player.sendEvent('LOAD', {file:'video3.flv'});">LOAD Video 3</button>
</body>
</html>
I have copied the code above to a file called:
simple.html
And it works great.
These files are in a folder structure like this:
simple.html
video.flv
player.swf
I change the following lines of code to:
'file': 'files/video.flv',
swfobject.embedSWF('files/player.swf'
and change the folder structure to look like this:
simple.html
files/video.flv
files/player.swf
and it won't play.
Can it only play with the actual video file in the same directory as the HTML code?
[FLASH]http://www.nhaccuatui.com/l/wT5wVcmbGznd[/FLASH]
code][FLASH]http://www.nhaccuatui.com/l/wT5wVcmbGznd[/FLASH]
@harringg,
See the tutorial Embedding Flash linked from the Support item on the green menu bar at the top of this page. The section titled Flashvars Problems explains the origin of the relative location of FLV files.
For your application, it would be:'file': 'video.flv',
I was looking for this same thing, and after experimentation found that it only works with the swfobject.js file found at the link provided in the example. it doesn't work with the swfobject.js file provided with the jw player.
If you want to run it locally, copy the .js file in the example above to your own site and then link to it locally.
this is the one i'm talking about:
src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js">
anyone know how to make a block of text change with the video? It would be great to have a description on the side that can also change.
thanks!
What would need to be added to make the video play and load on the click? Currently, when I click one of the buttons, it loads, but then I have to click in the player as well to get it to play.
Thanks so much for this... after hours and hours I've finally almost got it to work.
<button onclick="player.sendEvent('LOAD', {file:'video3.flv'}); <strong>player.sendEvent('PLAY', 'true');</strong>">LOAD & PLAY Video 3</button>See the documentation for the JavaScript API here: http://developer.longtailvideo.com/trac/wiki/FlashAPI
See the documentation for all supported events here: http://developer.longtailvideo.com/trac/wiki/FlashEvents
See the Developer tutorials here: http://developer.longtailvideo.com/trac/
hi, why i can't load my skin in this setting?
'skin': '../player/snelskin/snelskin.swf'
The link is at the right place
@Gino,
Post a link to your Test Page if you want useful and effective help. We can't guess.
sorry, i just find i forget to add a comma ,
at the end of the line, it's the first time i'm testing this javascript setting
How is the JW FLV Player embedded?
embed element, object element, swfobject?
To use the JavaScript API to load files into the player, you must use either the object element or (much better) swfobject.