PDA

View Full Version : How To Load New Embedded Youtube Video In Same Window


Tatious
12-05-2010, 10:30 PM
Hi,

Ive got a webpage that has an embedded youtube video and I have created a next and previous button to take users to the next video, is there any way I can have it so that instead of the next button taking you to a separate page with a new embedded youtube video it just replaces the existing vid with the new one?

you can see the page at sws.canterbury.ac.uk/gp61/video.html

davidj
12-06-2010, 03:53 PM
Yes but you will need to implement this using a server side technology like PHP

You could store a play list as XML or in a database and cycle through each one.

If you use either XML or a database then you could build an admin section where you could post new videos into the play list.

You need to learn PHP of course before this project becomes a reality.

jmichae3
12-07-2010, 02:04 AM
Hi,

Ive got a webpage that has an embedded youtube video and I have created a next and previous button to take users to the next video, is there any way I can have it so that instead of the next button taking you to a separate page with a new embedded youtube video it just replaces the existing vid with the new one?

you can see the page at sws.canterbury.ac.uk/gp61/video.html

you can do this without PHP using only javascript. but PHP is better recommended since you can't always rely on a browser having javascript. I noticed your page uses javascript heavily, I have some JS pages too.

if you choose to use JS, I sugect you keep 3 arrays,
- width of video
- height of video
- url (src) of video

put an id on the param elements that have the width, height, and URL and ob the object element and embed element.
on the object element, modify the width, height attributes.
on the embed element, modify the src (to url), width, and height attributes.
on the param name="movie" element, change the value attribute to the url.


<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="76">&nbsp;</td>
<td width="110"><img id="imgprev" src="pictures/prev.jpg" alt="prev" width="110" height="23" hspace="0" onclick="location.href='http://sws.canterbury.ac.uk/gp61/video.html?n=2'" /></td>
<td width="425">
<object id="objectid" width="425" height="344" hspace="0" vspace="5" align="bottom">
<param id="paramid" name="movie" value="http://www.youtube.com/v/0zN60D_IaoI?hl=en&fs=1" />
<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />
<embed id="embedid" src="http://www.youtube.com/v/0zN60D_IaoI?hl=en&fs=1" width="425" height="344" hspace="0" vspace="5" align="bottom" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>&nbsp;</td>
<td width="110"><img id="imgnext" src="pictures/next.jpg" alt="next" width="110" height="23" onclick="location.href='http://sws.canterbury.ac.uk/gp61/video.html?n=1'" /></td>
<td width="79">&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
var widths=new Array(), heights=new Array(), urls=new Array();

//put your videos here.
widths[0]=425;
heights[0]=344;
urls[0]='http://www.youtube.com/v/0zN60D_IaoI?hl=en&fs=1';

widths[1]=720;
heights[1]=480;
urls[1]='http://www.youtube.com/v/whatever';

widths[2]=425;
heights[2]=344;
urls[2]='http://www.youtube.com/v/whatever2';




//this function grabs the arguments from the URL, as if it was a CGI, and returns it in an array.
function getURLargs() {
//by Jim Michaels
//find the first '?' and drops the location part of the URL.
var sargs = new String(document.location);
if (sargs == "") {
var qpos = -1;
} else {
var qpos = sargs.indexOf("?",0);
}
var nularg = new Array();
if (qpos < 0) {
//no args.
return nularg;
} else {
sargs=sargs.substring(qpos+1); //leave only args in the string, not including '?'
if (sargs.indexOf("&",0) < 0) { //handle the case of ?argument
//either 1 or no arguments, but no &
va = new Array();
var i;
if (""==sargs) {
va[0] = String(sargs).split('=');
} else {
//document.write("arg[0].length="+arg[0].length+"<br />");//debug//correct
for (i=0; i < arg[0].length; i++) {
va[0,i] = String(unescape(arg[0,i]));
}
}
return va;
} else {
//found argument splitter &
va=String(sargs).split('&'); //va is the varargs array. it is an array of arguments from the split &
window.valength=va.length; //have to keep a copy of this otherwise it gets destroyed upon creation of the 2d array.
var j;
var index;
//document.write("va.length="+va.length+"<br />");//debug//correct
for (index = 0; index < window.valength; index++) {
//if ("" == va[index]) {
va[index] = va[index].toString().split('=');
//document.write("va["+index+"].length="+va[index].length+"<br />");//debug
sa[index] = va[index].length; //size of array
//there should be only 1 or 2 here.
if (0==sa[index]) {
va[index]=new Array(String(""),String("")); //this shouldn't happen
//document.write("va["+index+","+j+"]='(null)'<br />");//debug
} else if (1==sa[index]) {
va[index]=new Array(String(""),va[index]);
//document.write("va["+index+"]["+j+"]='"+va[index][j]+"'<br />");//debug
} else {//case or 2 or more - should really only be 2
for (j=0; j < sa[index]; j++) {
va[index][j]=String(unescape(String(va[index][j])));
//document.write("va["+index+"]["+j+"]='"+va[index][j]+"'<br />");//debug
}
}
//}
}
//document.write("va.length="+va.length+"<br />");//debug//it changes!
return va;
}
//should never get here
}
//return nularg; //should never get here.
var nularg = new Array();
return nularg;
}

//grab URL argument n
var a=getURLargs();
var n=0;
if ('n'==a[0][0]) {
n=parseInt(a[0][1]);
}

var nextn=(n+1)%count(urls);
var prevn=n-1; if (n<0) {n = count(urls)-1;}
//on the object element, modify the width, height attributes.
//on the embed element, modify the src (to url), width, and height attributes.
//on the param name="movie" element, change the value attribute to the url.
document.getElementById('objectid').setAttribute(' width', widths[n]);
document.getElementById('objectid').setAttribute(' height', heights[n]);

document.getElementById('embedid').setAttribute('w idth', widths[n]);
document.getElementById('embedid').setAttribute('h eight', heights[n]);
document.getElementById('embedid').setAttribute('s rc', urls[n]);

document.getElementById('paramid').setAttribute('v alue', urls[n]);

document.getElementById('imgprev').setAttribute('o nclick', "location.href='http://sws.canterbury.ac.uk/gp61/video.html?n="+prevn+"'");
document.getElementById('imgnext').setAttribute('o nclick', "location.href='http://sws.canterbury.ac.uk/gp61/video.html?n="+nextn+"'");

</script>