different links during the video
Oct. 26, 2009kisscool82
Hello everybody !
I'm sorry for my english... :p
i'd like to know if there's a way to controle differents links during the video's watching.
explainations :
With the flashvars "displayclick" we can redirect to a url when the user clicks on display.
I wanna know if it's possible to control the link url with the time. The idea is to use an xml files just like the captions.
For example :
<link begin="00:00:13.5" end="00:00:15">http://www.myfirsturl.com/</link>
<link begin="00:00:17" end="00:00:20">http://www.mysecondurl.com/</link>
<link begin="00:00:24" end="00:00:29">http://www.mythirdurl.com/</link>
Does anybody know how to do that ?
Thank you
Oct. 26, 2009hobbs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Simple Multiple Timed Links - JWMP v4.6.x - swfobject v2.2</title>
<style type="text/css">
div.playercontainer
{
position: absolute;
top: 100px;
left: 350px;
width: 480px;
height: 362px;
border: solid 1px #808080;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('swfobject', '2.2');
</script>
<script type="text/javascript">
var flashvars =
{
'file': 'playlist_multiple_timed_links.xml',
'playlist': 'bottom',
'playlistsize': '60',
'skin': 'snel-2',
'displayclick': 'link',
'linktarget': '_self',
'frontcolor': 'FF00FF', // text & icons (magenta)
'backcolor': 'FFFFFF', // playlist background (white)
'lightcolor': 'CCFF66', // selected text/track highlight (lime-green)
'screencolor': 'FFFFFF', // screen background (white)
'id': 'playerID',
'autostart': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('player-4.6.485.swf', 'player', '480', '362', '9.0.124', false, flashvars, params, attributes);
</script>
<script type="text/javascript">
var player = null;
var playlist = null;
var currentItem = 0;
var currentTime = 0;
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addControllerListener('ITEM', 'itemMonitor');
player.addModelListener('TIME', 'timeMonitor');
}
else
{
setTimeout("addListeners();", 50);
}
};
function itemMonitor(obj)
{
currentItem = obj.index;
};
function timeMonitor(obj)
{
currentTime = obj.position;
};
function linkURI()
{
for(var j in playlist[currentItem])
{
//alert(j + ': ' + playlist[currentItem][j]);
var pattern = new RegExp('link.');
//...check for link1, link2, link3...
if(pattern.test(j))
{
//alert('j: ' + j);
//...get begin, end, link by splitting on ,
var linkn = playlist[currentItem][j].split(',');
if((currentTime > linkn[0]) && (currentTime < linkn[1]))
{
//alert('link: ' + linkn[2]);
window.open(linkn[2]); //...new window
//document.location = linkn[2]; //...same window
}
else
{
//...a default link could go here
}
}
}
};
function gid(name)
{
return document.getElementById(name);
};
</script>
</head>
<body>
<br />
<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>
</body>
</html>
<?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>
<jwplayer:author>Video Author</jwplayer:author>
<jwplayer:title>Video Title</jwplayer:title>
<jwplayer:file>video.flv</jwplayer:file>
<jwplayer:image>video.jpg</jwplayer:image>
<jwplayer:description>This is a terribly long description without a word of truth in it - just nonsense and more nonsense. However, it does fill up the playlist display space so we can see just how that works.</jwplayer:description>
<jwplayer:duration>14</jwplayer:duration>
<jwplayer:link1>2,6,http://www.google.com/</jwplayer:link1>
<jwplayer:link2>8,10,http://www.yahoo.com/</jwplayer:link2>
<jwplayer:link3>12,14,http://www.msn.com/</jwplayer:link3>
<jwplayer:link>javascript:linkURI();</jwplayer:link>
</track>
</trackList>
</playlist>
Oct. 28, 2009kisscool82
Thank you for the answer.
I try your solution immediately
Oct. 28, 2009kisscool82
I've got a problem.
Eveything seems to work but the linkURI function does'nt run.
I use an xml playlist. Here's the code :
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Exemple de tracklist XML</title>
<info>http:/xspf.org/xspf-v1.html</info>
<trackList>
<track>
<title>Les brèves du jour</title>
<location>videos/flash.flv</location>
<annotation>Les brèves du jour</annotation>
<image>images/flash.jpg</image>
<info><![CDATA[javascript:linkURI();]]></info>
<link1>14,29,http://www.google.com/</link1>
<link2>30,46,http://www.yahoo.fr/</link2>
</track>
</trackList>
</playlist>
And the linkURI function :
function linkURI(){
alert("something happen :p");
for(var j in playlist[currentItem]){
alert(j + ': ' + playlist[currentItem][j]);
var pattern = new RegExp('link.');
//...check for link1, link2, link3...
if(pattern.test(j)){
alert('j: ' + j);
//...get begin, end, link by splitting on ,
var linkn = playlist[currentItem][j].split(',');
if((currentTime > linkn[0]) && (currentTime < linkn[1])){
alert('link: ' + linkn[2]);
//window.open(linkn[2]); //...new window
document.location = linkn[2]; //...same window
} else {
//...a default link could go here
}
}
}
};
Do you see my mistake ?
Thank you
Oct. 28, 2009kisscool82
I've got it.
I've forgotten the linktarget: "_self" 
There's another problem it seems the link1, link2, link3, etc properties does'nt exist in the playlist[currentItem] object.
Here's the good way to do it in xml playlist :
<track>
<title>Les brèves du jour</title>
<location>videos/flash.flv</location>
<annotation>Les brèves du jour</annotation>
<image>images/flash.jpg</image>
<meta rel="info1">14,29,http://www.google.com/</meta>
<info><![CDATA[javascript:linkURI();]]></info>
</track>
And i've just modify the linkURI function a bit :
function linkURI(){
for(var j in playlist[currentItem]){
//alert(j + ': ' + playlist[currentItem][j]);
var pattern = new RegExp('info.');
//...check for info1, info2, info3...
if(pattern.test(j)){
//alert('j: ' + j);
//...get begin, end, link by splitting on ,
var linkn = playlist[currentItem][j].split(',');
if((currentTime > linkn[0]) && (currentTime < linkn[1])){
//alert('link: ' + linkn[2]);
window.open(linkn[2]); //...new window
//document.location = linkn[2]; //...same window
} else {
//...a default link could go here
}
}
}
};
It works perfectly ! Thank you for your advice.
Oct. 28, 2009hobbs
In your playlist, you should have used the jwplayer namespace element jwplayer:link1, ...2, ...3 as in my example posted above, although the meta element like you used is also OK.
Search the Forums
Forum Categories
Support
Here are some helpful links to learn more about the JW Player™:
- Setup Wizard writes player code for you.
- Embedding Flash Tutorial shows how to embed the JW Player™ in your site.
- Forum provides access to over two million JW Player™ users.
- Developers Center (Wiki) explains everything from flashvars to skinning.
- Do you need custom Flash work? Email us.
Monetize Your Video
Earn money with ads from LongTail's AdSolution. Watch our demos and sign up now!
Why Buy a License?
If you don’t buy a commercial license, you cannot use a JW Player™ on (i) a site that has ads; (ii) a corporate site; or a (iii) CMS. Our licenses are very inexpensive, so what are you waiting for? Buy a license today.
