Javascript Assistance

Ethrock · Dec 6, 2010

Hey everyone, I'm fairly new (and I mean, completely new) to Javascript programming. I have a tiny little bit of experience in other languages (most predominantly html/css) and have come to a point where I can't seem to find an answer anywhere for this.

What I'm hoping to do is have a Javascript read from a custom array (that I would create) using the 11 character codes for youtube videos, randomly select one such code from that array, and use it to display an embedded video, in effect selecting and displaying a random video from a custom created list. I'm looking to do this without resorting to PHP.

So far I've had no luck, and I will provide here the code for you to see.

Here is the Javascript at its source;
http://yourjavascript.com/26101752210/rndvid.js

and for those of you who would prefer to read it in the forum, here it is;

Code:

function randomVideo(){
//format for calling pop up window
vid = new Array();
vid[0] = 'X3iFhLdWjqc';
vid[1] = 'ADC3SLx6HV8';

var ranNum = Math.floor(Math.random() * vid.length);

var movielink;
movielink = "http://www.youtube.com/v/" + vid[ranNum] + "&rel=1";

var mainlink = "";
mainlink = "<object width='425' height='355'>";
mainlink = mainlink + "<param name='wmode' value='transparent'></param>";
mainlink = mainlink + "<embed src='" + movielink + "' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'></embed>";
mainlink = mainlink + "</object>";

document.getElementById('movietext').innerHTML = mainlink;

document.write(mainlink);

return false;
}

(I will note I modified but did not write this code!)

Here is the HTML that I place on the page to attempt to have the video displayed;

Code:

<script type="text/javascript" src="http://yourjavascript.com/26101752210/rndvid.js">
randomVideo();
</script>

Does anything immediately pop out as incorrect? Are there any helpful suggestions that can be provided (Besides the "use PHP" default response I received on a few other forums?

All help and advice is greatly appreciated, thank you!

hollywood · Dec 6, 2010

I would be very interested to know where you found this source code.

In this case you need to add the 'movietext' id where you want the video to display, so getElementById can find it. something like this will work:

Code:

<div id="movietext"></div>

Ethrock · Dec 7, 2010

So would that go after the <script> or outside of the bounds of the script? Ie would it be <div><script>info</script></div> or <script><div>info</div></script>

?

hollywood · Dec 7, 2010

so here I spend the time to help you and you won't answer my simple question?

?

superiordomainnames · Dec 7, 2010

hollywood said:
so here I spend the time to help you and you won't answer my simple question?

?

lol, you know I actually tried the code, but it didn't work. I didn't look into why even if he had the element with the proper id.

Ethrock · Dec 8, 2010

superiordomainnames said:
lol, you know I actually tried the code, but it didn't work. I didn't look into why even if he had the element with the proper id.

Is there any insight you could offer as to why this might be?

hollywood said:
so here I spend the time to help you and you won't answer my simple question?

?

My apologies. I gathered the code from a forum post which can be located here: http://forums.aspfree.com/html-java...tml-to-display-random-flash-video-200545.html

there is html code to embed it provided in this topic but I found that the iframe method was unsuccessful.

hollywood · Dec 8, 2010

ok thanks for the response, appreciated

here's what I would do:

up in the <head> portion of your HTML page, put the call that loads the .js file remotely.

Then, down in the body of your page, call the function with javascript.

That function uses a standard technique of writing its output to a particular ID that is specified in the CSS. Wherever you choose to place the <div id="movietext"></div>
on your HTML page, that is the spot where the js function is going to write the embed code that shows the video.

Ethrock · Dec 10, 2010

hollywood said:
ok thanks for the response, appreciated

here's what I would do:

up in the <head> portion of your HTML page, put the call that loads the .js file remotely.

Then, down in the body of your page, call the function with javascript.

That function uses a standard technique of writing its output to a particular ID that is specified in the CSS. Wherever you choose to place the <div id="movietext"></div>
on your HTML page, that is the spot where the js function is going to write the embed code that shows the video.

This also was not successful which leads me to believe the javascript is the problem... Anybody know what might be wrong with it?

Qc4 · Dec 10, 2010

Above, you have the randomVideo() call inside the <script> tag, which won't work. You need to make sure it's called after the movietext div is rendered in your browser, so try putting it either in the body after the movietext div or in an onload event.

baxter · Dec 10, 2010

I just ran the code you had and it worked almost perfect for me, you have to make sure you have the following:

Code:

<div id="movietext"></div>

Then you can run randomVideo() after the page has fully loaded. There was one typo in the code, document.write(mainlink) isn't really needed since you putting it into the div element with the innerHTML call. Heres the adjusted code:

Code:

function randomVideo(){
//format for calling pop up window
vid = new Array();
vid[0] = 'X3iFhLdWjqc';
vid[1] = 'ADC3SLx6HV8';

var ranNum = Math.floor(Math.random() * vid.length);

var movielink;
movielink = "http://www.youtube.com/v/" + vid[ranNum] + "&rel=1";

var mainlink = "";
mainlink = "<object width='425' height='355'>";
mainlink = mainlink + "<param name='wmode' value='transparent'></param>";
mainlink = mainlink + "<embed src='" + movielink + "' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'></embed>";
mainlink = mainlink + "</object>";

document.getElementById('movietext').innerHTML = mainlink;

return false;
}

now tests on my localhost, it took almost 5-10 seconds for the video to load after running the randomVideo call so make sure you give it time to load the video.

Cheers,

Jay

Ethrock · Dec 10, 2010

Thank you infinitely to everyones support! Thank you guys! I learned lots toying with this. Got it to work, I'm so happy <3

Ethrock · Dec 11, 2010

Ethrock said:
Thank you infinitely to everyones support! Thank you guys! I learned lots toying with this. Got it to work, I'm so happy <3

It would actually appear I still need some help, I want to have mutliple of these items appear on a single page, but adding additional randomVideo(); commands, adding new <script> tags, and adding new <div> tags do not work. It will only let me have one (or any multiples display the same video) I want all of them to draw from the same array. What should I do?

Qc4 · Dec 11, 2010

One possibility would be to change:

Code:

function randomVideo(){

to:

Code:

function randomVideo(id){

and change:

Code:

document.getElementById('movietext').innerHTML = mainlink;

to:

Code:

document.getElementById(id).innerHTML = mainlink;

Now, you can create as many <div>s as you want. Just be sure to call the randomVideo() function for each:

Code:

<div id="movietext1"></div>
<div id="movietext2"></div>
<div id="movietext3"></div>

<script type="text/javascript">
randomVideo('movietext1');
randomVideo('movietext2');
randomVideo('movietext3');
</script>

Javascript Assistance

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Similar threads

We're social

Pinned

Appreciation

Agreement