Hello, I develop a website for a non profit organization. They have a video page where I have inserted a video playlist using wordtube, the plugin for Wordpress.
On home page, they have couple images for featured videos. I would like to target each video to the specific video from videos page, and make it start automatically.
Is any solution for this?
Thanks
Thanks but it doesn't help. The example is linking from the same page.
Can anyone who made this work, give a specific example?
Thanks a lot
I guess you didn't read the last post in that thread very carefully.
There are links to two examples showing how to load from another page.
Oh well...
I think you mean this portion of the code:
<a href="#" onclick="javascript:sendEvent('playitem', 3); return false;">
It might work if I link to page with video playlist.
Now I am wondering how to make this work with wordtube for wordpress?
The plugin use other method of JS implementation.
In my head I have:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js?ver=2.1'></script>
and in body section:
<script type="text/javascript" defer="defer">
var WT1_1 = {
params : {
wmode : "opaque",
allowscriptaccess : "always",
allownetworking : "all",
allowfullscreen : "true"},
flashvars : {
file : "http://www.domain.org/wp-content/plugins/wordtube/myextractXML.php?id=0",
volume : "80",
bufferlength : "5",
quality : "false",
backcolor : "00adee",
skin : "http%3A%2F%2Fdomain%2Fwp-content%2Fplugins%2Fwordtube%2Fdangdang.swf",
shuffle : "false",
playlistsize : "200",
playlist : "right"},
attr : {
id : "WT1",
name : "WT1"},
start : function() {
swfobject.embedSWF("http:/domain.org/wp-content/plugins/wordtube/player.swf", "WT1_1", "600", "270", "9.0.0", false, this.flashvars, this.params , this.attr );
}
}
WT1_1.start();
</script>
Ideally, I still want to use the plugin for Wordpress.
No, its the query parameter code.
With this on the calling page:
<a href="http://www.mydomain.com/path/page.html?item=3">PLAY Item 4</a>When the user clicks on the link, the called page will load and play the fourth track.
Those examples also include the code to load a playlist on the called page and select by id or index.
The examples are the called page with the player code and swfobject.getQueryParamValue() to receive the parameter(s).
Maybe this will make it clearer.
Calling Page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
<head>
<title>Calling Page</title>
</head>
<body>
Click <a href="http://www.mydomain.com/path/calledpage.html?item=3">here</a> to see the video.
</body>
</html>
Called Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en">
<head>
<!-- call with: http://www.mydomain.com/calledpage.html?item=3 -->
<title>Called Page - JWMP v4.5.x - swfobject v2.1</title>
<style type="text/css">
body
{
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript">
var player = null;
var playlist = null;
var playItem = null;
if(!(playItem = swfobject.getQueryParamValue('item')))
{
//...default is first item (array counting starts at 0)
playItem = 0;
}
//alert('Play Item: ' + playItem);
function playerReady(obj)
{
player = document.getElementById(obj.id);
playAway();
};
//...start the player on the query parameter item
function playAway()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("playAway()", 100);
}
//alert('playAway:\nplayAway - playItem:' + playItem);
player.sendEvent('ITEM', playItem);
setTimeout("player.sendEvent('PLAY', 'true')", 200);
};
</script>
<script type="text/javascript">
var flashvars =
{
'file': 'playlist_songs.xml',
'playlist': 'bottom',
'playlistsize': '180',
'skin': 'modieus',
'logo': 'logo.png'
'repeat': 'list',
'shuffle': 'false',
'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': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('player-4.5.218.swf', 'player', '570', '570', '9.0.124', false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://www.macromedia.com/go/getflashplayer">Get flash</a> to see this player.</div>
</body>
</html>
LoLo, thanks a lot for help. I understand the way it works now, but still the player doesn't start when I click on caller page.
I have this on caller page which links to player:
<a href="http://localhost/joint-use/wordpress/resources/success-spotlight/?item=1">play video 2 1</a><code>
That was easy.
Now, on video page I have in head section (I won't post all of the code from there, just the code for wordtube ):
<code><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js?ver=2.1'></script>
<script type="text/javascript">
var player = null;
var playlist = null;
var playItem = null;
if(!(playItem = swfobject.getQueryParamValue('item')))
{
//...default is first item (array counting starts at 0)
playItem = 0;
}
//alert('Play Item: ' + playItem);
function playerReady(obj)
{
player = document.getElementById(obj.id);
playAway();
};
//...start the player on the query parameter item
function playAway()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("playAway()", 100);
}
//alert('playAway:\nplayAway - playItem:' + playItem);
player.sendEvent('ITEM', playItem);
setTimeout("player.sendEvent('PLAY', 'true')", 200);
};
</script>
Yes, I know, I have omitted the player section, but Wordtube generates that automatically in body section, and have limited control on the code from over there (and this might be the problem too):
<div class="wordtube">
<div class="wordtube playlist0" id="WT1_1" name="WT1_1" style="width:598px; height:270px;">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see the wordTube Media Player.
</div></div>
<script type="text/javascript" defer="defer">
var WT1_1 = {
params : {
wmode : "opaque",
allowscriptaccess : "always",
allownetworking : "all",
allowfullscreen : "true"},
flashvars : {
file : "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/myextractXML.php?id=0",
volume : "80",
bufferlength : "5",
quality : "false",
backcolor : "00adee",
skin : "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/dangdang.swf",
plugins : "viral-1",
shuffle : "false",
playlistsize : "208",
playlist : "right"},
attr : {
id : "WT1",
name : "WT1"},
start : function() {
swfobject.embedSWF("http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/player.swf", "WT1_1", "598", "270", "9.0.0", false, this.flashvars, this.params , this.attr );
}
}
WT1_1.start();
</script>
</div>
Based on examples provided, it should start playing, bu I am not sure if I need to specify something else in head section.
Any help on this one?
Your code looks OK.
There are two alerts in the JS code (the bold lines) that you can activate by uncommenting them.
When you call the player page, the alerts should popup with:
Play Item: 1
and
playItem: 1
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js?ver=2.1'></script>
<script type="text/javascript">
var player = null;
var playlist = null;
var playItem = null;
if(!(playItem = swfobject.getQueryParamValue('item')))
{
//...default is first item (array counting starts at 0)
playItem = 0;
}
<strong>alert('Play Item: ' + playItem);</strong>
function playerReady(obj)
{
player = document.getElementById(obj.id);
playAway();
};
//...start the player on the query parameter item
function playAway()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("playAway()", 100);
}
<strong>alert('playItem:' + playItem);</strong>
player.sendEvent('ITEM', playItem);
setTimeout("player.sendEvent('PLAY', 'true')", 200);
};
</script>
<div class="wordtube">
<div class="wordtube playlist0" id="WT1_1" name="WT1_1" style="width:598px; height:270px;"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player to see the wordTube Media Player.</a></div></div>
<script type="text/javascript" defer="defer">
var WT1_1 =
{
params:
{
wmode: "opaque",
allowscriptaccess: "always",
allownetworking: "all",
allowfullscreen: "true"
},
flashvars:
{
file: "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/myextractXML.php?id=0",
volume: "80",
bufferlength: "5",
quality: "false",
backcolor: "00adee",
skin: "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/dangdang.swf",
plugins: "viral-1",
shuffle: "false",
playlistsize: "208",
playlist: "right"
},
attr:
{
id: "WT1",
name: "WT1"
},
start: function()
{
swfobject.embedSWF("http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/player.swf", "WT1_1", "598", "270", "9.0.0", false, this.flashvars, this.params , this.attr );
}
}
WT1_1.start();
</script>
</div>Does localhost refer to a web server that you are running locally?
Are you testing on a Linux system? If yes, then you need to add the flashvar id: "WT1", to the wordtube code.
I have removed the comments and when I access the caller page shows alert:
Play item 0 (which is default)
and when I click the link, it takes me to the video page and pop-up
Play item 1
I have tested it both on my local wamp server and the linux web server from BlueHost, but still not working.
I can see I already have the id specified in wordtube code where should I specify the idL"WT1, exactly?:
attr:
{
id: "WT1",
name: "WT1"
}Thank you for assistance.
So you got the first alert, but not the second alert, correct?
I'm pretty sure that you are not getting the player reference object. You are on a Linux system, correct?
Try adding this alert:
function playerReady(obj)
{
player = document.getElementById(obj.id);
<strong>alert('Player ID: ' + player.id);</strong>
playAway();
};The flashvar id should go anywhere in the flashvars, like this:
flashvars:
{
file: "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/myextractXML.php?id=0",
volume: "80",
bufferlength: "5",
quality: "false",
backcolor: "00adee",
skin: "http://localhost/domainname.org/wordpress/wp-content/plugins/wordtube/dangdang.swf",
plugins: "viral-1",
shuffle: "false",
<strong>id: "WT1",</strong>
playlistsize: "208",
playlist: "right"
},However, since you are using the wordtube plugin, you will have to find the appropriate place to add it in the worktube files (or — perhaps in the wordtube configuration menus???).
Correct, I haven't got the second alert, just one.
I test both on Linux, both on Windows system, I added the flasvar id:
id: "WT1",
in appropriate place, but it made no difference.
In head I added the alert you told me:
<script type="text/javascript">
var player = null;
var playlist = null;
var playItem = null;
if(!(playItem = swfobject.getQueryParamValue('item')))
{
//...default is first item (array counting starts at 0)
playItem = 0;
}
<strong>alert('Play Item: ' + playItem);</strong>
function playerReady(obj)
{
player = document.getElementById(obj.id);
playAway();
};
//...start the player on the query parameter item
function playAway()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("playAway()", 100);
}
<strong> function playerReady(obj)
{
player = document.getElementById(obj.id);
alert('Player ID: ' + player.id);
playAway();
};</strong>
<strong>alert('playItem:' + playItem);
player.sendEvent('ITEM', playItem);
setTimeout("player.sendEvent('PLAY', 'true')", 200);
};</strong>
Any other solution?
When the called page loads, did you get the alert:
Player ID: WT1You must get the player reference object before you can use the JavaScript API.
The id flashvar for Linux was added recently (I don't remember the exact release) so make sure that you are using the latest player which you can get from here:
http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf
Click on the release that you want in the Rev column to download the player.
However, older players should work correctly in Windows.
Can you post a link to your test page so I can examine it?
I have discovered the problem: it was a XML path issue, and the javascript needed to stay right before </head>. i think conflicted with other JS.
Everyone can watch it live at:www.jointuse.org (at this moment is in maintenance mode, but will be live soon)
Thanks a lot Lolo for helping out!
You're welcome. I'm glad it's successful.
Good Luck!
Hi
I have copied LoLo's code and kinda have it working except that when the second page where my player is is displayed, the video i stated in my link on previous page is playing but the player is displaying a black screen. The duration of the video on the control bar is the duration of the video i linked but the player is black. When i click on the video in the playlist, it plays fine.
Anyone know why this could be happening. I'm using windows not linux
Some releases do that (black screen).
Try a different release from here:
http://developer.longtailvideo.com/trac/log/trunk/fl5/player.swf
Click on the release that you want in the Rev column.
Note that these are v5 players!
The v4 players are here:
http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf
I tried a different release but no joy. The videos are playing fine -it's only when i try to link from another page to a specific video in playlist that that video shows as black in the player but the time bar is moving.
See the last post in this thread: http://www.longtailvideo.com/support/forum/Setup-Problems/9916/Can-I-connect-a-hyperlink-to-a-item-o...