/    Sign up×
Community /Pin to ProfileBookmark

need help for this random video script

Greetings

I’m using a script to display rotating youtube videos in the sidebar of my invision board. The problem is that the random thing causes the same video to be repeated twice in row at times. I need to add a cookie so that no video gets displayed to the same user until all other videos have been displayed. I also look for adding – if possible – a line to count the videos, so that I don’t have to edit the number each time I add more videos..

Can someone please help me with that?
Here is the script I’m using:

[code=html]<script type=”text/javascript”>

function rand ( n )
{
return ( Math.floor ( Math.random ( ) * n + 1 ) );
}

// Store youtube [CHANGES NEEDED IN THE 3 URLS BELOW]
var vids = new Array ( );
vids[0] = “http://www.youtube.com/embed/aF4M0JtoIPk”;
vids[1] = “http://www.youtube.com/embed/KMxWhovYfzc”;
vids[2] = “http://www.youtube.com/embed/ffZUWZQE0EU”;
vids[3] = “http://www.youtube.com/embed/povUgNcf4aI”;
vids[4] = “http://www.youtube.com/embed/Zs9u7X0rrd0”;
vids[5] = “http://www.youtube.com/embed/D4L0KpqNzkU”;
vids[6] = “http://www.youtube.com/embed/Mfdnb0Q7IBM”;
vids[7] = “http://www.youtube.com/embed/D-JJpPBjQwI”;
vids[8] = “http://www.youtube.com/embed/kn5NSCJ2tiI”;
vids[9] = “http://www.youtube.com/embed/BDxDMCWShds”;

// Pick a random video from the list
function pick_vid ( )
{
var numberOfImages = 10; //[CHANGE THE 3 TO THE TOTAL NUMBER OF VIDS YOU USE]
var num = rand(numberOfImages)-1;

document.getElementById(“random_youtube_vid”).src = vids[num];
}
</script>

<script type=”text/javascript”>window.onload=pick_vid;</script>
<p style=”padding: 6px 0;text-align:center”>
<iframe id=”random_youtube_vid” width=”250″ height=”200″ frameborder=”0″ allowfullscreen></iframe>
</p>[/code]

I found another scripts that could be of help, as it uses div and cookies..
But its for general display of anything. It doesn’t have the iframe for the video. I don’t know how to merge both scripts. Or perhaps you have better ideas..

[code=html]<div id=”randomdiv1″ style=”display:none;”>
[content for div 1]
</div>
<div id=”randomdiv2″ style=”display:none;”>
[content for div 2]
</div>
<div id=”randomdiv3″ style=”display:none;”>
[content for div 3]
</div>

<script type=”text/javascript” language=”JavaScript”><!–
/* Random Div Display
Version 1.0
March 9, 2009
Will Bontrager
http://www.willmaster.com/
Copyright 2009 Bontrager Connection, LLC
For information about implementing this software, see the article at
http://www.willmaster.com/library/javascript/random-div-display.php
*/
// One place to customize:
//
// Type the number of div containers to randomly display.
NumberOfDivsToRandomDisplay = 3;
// No other customizations required.
////////////////////////////////////
var CookieName = ‘DivRamdomValueCookie’;
function DisplayRandomDiv() {
var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay);
if(NumberOfDivsToRandomDisplay > 1) {
var ck = 0;
var cookiebegin = document.cookie.indexOf(CookieName + “=”);
if(cookiebegin > -1) {
cookiebegin += 1 + CookieName.length;
cookieend = document.cookie.indexOf(“;”,cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
ck = parseInt(document.cookie.substring(cookiebegin,cookieend));
}
while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); }
document.cookie = CookieName + “=” + r;
}
for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) {
document.getElementById(“randomdiv”+i).style.display=”none”;
}
document.getElementById(“randomdiv”+r).style.display=”block”;
}
DisplayRandomDiv();
//–></script>[/code]

Many thanks in advance.

to post a comment
JavaScript

13 Comments(s)

Copy linkTweet thisAlerts:
@nap0leonFeb 15.2012 — Dynamically create the array by creating them as a delimited string and then splitting it on the delimiter. In this example, I used a [Tab], but you can use whatever you want:
<i>
</i>var vids = '';
vids += "http://www.youtube.com/embed/aF4M0JtoIPk";
vids += " " + "http://www.youtube.com/embed/KMxWhovYfzc";
vids += " " + "http://www.youtube.com/embed/ffZUWZQE0EU";
vids += " " + "http://www.youtube.com/embed/povUgNcf4aI";
vids += " " + "http://www.youtube.com/embed/Zs9u7X0rrd0";
vids += " " + "http://www.youtube.com/embed/D4L0KpqNzkU";
vids += " " + "http://www.youtube.com/embed/Mfdnb0Q7IBM";
vids += " " + "http://www.youtube.com/embed/D-JJpPBjQwI";
vids += " " + "http://www.youtube.com/embed/kn5NSCJ2tiI";
vids += " " + "http://www.youtube.com/embed/BDxDMCWShds";

var arrVids = vids.split(' ');


That way you can add/remove videos.

For random number, you want to pick any number between 0 and "arrVids.length - 1"

(e.g., if there are 10 videos, you want a number between 0 and 9).

To avoid duplication:

1- Whenever a user visits the page, check to see if a "start position" is cookies. If not, pick a random number 0-9 and cookie it as "start position". If they do, verify the number is still valid (you may have decreased the array size... don't want to try to show them video 15 if you only have 7 - if the number is no longer valid, pick a new start position and use it, regardless of their "last viewed" setting (#2 below))

2- Now check to see if the user has a "last viewed" cookie.


2a- If not, then show them the video at the start position and cookie that value.

2b- If they do, then increment "last viewed" by one. If that number is less than "arrVids.length - 1", show them that video and cookie that number as their "last viewed". If that number is greater than "arrVids.length - 1", set it to 0.
Copy linkTweet thisAlerts:
@sallamauthorFeb 15.2012 — Many thanks.

Unfortunately, I don't know javasript. Could you please translate these steps into javascript?
Copy linkTweet thisAlerts:
@sallamauthorFeb 16.2012 — Thanks. I'm not looking for more ideas. I just need the above ideas into a script to use. I don't know how to write javascript myself, so, hoping for someone's generosity.

Thanks.
Copy linkTweet thisAlerts:
@007JulienFeb 16.2012 — The ranges of the videos are useless especially if you wish to modify the list of videos. You have probably to use the short url to concatenate to [I]"http://www.youtube.com/embed/"[/I].

For cookies, it is enough to use the two w3cschools.com functions : [I]setCookie[/I] and [I]getCookie[/I]. A cookie has a name (for example "seenVids", a javascript string) a value (for example "povUgNcf4aI,D-JJpPBjQwI" the short urls of already seen videos) and a life cycle in days (it is your choice, 100 days could be a value). [I]setCookie[/I] create the cookie and [I]getCookie[/I] return the value of the cookie if any (we modify this function to return an empty string if the cookie do not exists).

Then something like this could solve your problem...
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<style type="text/css">
</style>
<script type="text/javascript">
[COLOR="Blue"]// The tools
// To read the cookie[/COLOR]
function getCookie(c_name){
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++){
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^s+|s+$/g,"");
if (x==c_name){return unescape(y);}}
return ""; [COLOR="Blue"]// to return an empty string if the cookie do not exists [/COLOR]
}
[COLOR="Blue"]// To set the cookie[/COLOR]
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
[COLOR="Blue"]// To define the array of videos (see the split at the end)
// with a string availableVids[k] to concatenate to "http://www.youtube.com/embed/" [/COLOR]
availableVids="aF4M0JtoIPk,KMxWhovYfzc,ffZUWZQE0EU,povUgNcf4aI,Zs9u7X0rrd0,D4L0KpqNzkU,Mfdnb0Q7IBM,D-JJpPBjQwI,kn5NSCJ2tiI,BDxDMCWShds".split(',');

[COLOR="Blue"]// Global variables[/COLOR]
var yetSeenVids,toSeeVids,randomVid;

[COLOR="Blue"]// To list the already seen videos[/COLOR]
function listVids(){
yetSeenVids=getCookie("seenVids");
alert("YetSeenVids "+yetSeenVids);
toSeeVids=new Array();
for (var i=0;i<availableVids.length;i++){
[COLOR="Blue"]// a regular expression with word caption to avoid already seen videos [/COLOR]
var r=new RegExp("\b"+availableVids[i]+"\b","g");
if (!r.test(yetSeenVids)) toSeeVids[toSeeVids.length]=availableVids[i];
}
alert("ToSeenVids "+toSeeVids);

if (!toSeeVids.length) {[COLOR="Blue"]// No more videos : kill the cookie and recall this function[/COLOR]
setCookie("seenVids","",-7);setTimeout(listVid,50);}
else chooseVids();

}
[COLOR="Blue"]// To choose the video and renew the cookie[/COLOR]
function chooseVids(){
randomVid=toSeeVids[Math.floor(Math.random()*toSeeVids.length)];
alert("RandomVid "+randomVid);
document.getElementById('ifr').src="http://www.youtube.com/embed/"+randomVid;
if (yetSeenVids) yetSeenVids+=','+randomVid;
else yetSeenVids=randomVid;

alert("YetSeenVids "+yetSeenVids);
setCookie("seenVids",yetSeenVids,100);
}
[COLOR="Blue"]// Action[/COLOR]
window.onload=listVids;
</script>
</head>
<body>
<iframe id="ifr" width="250" height="200" frameborder="0" allowfullscreen></iframe>
</body>
</html>[/CODE]
Then you have only to comment the alerts and perhaps to manage the cookie (its length is limited) to erase old videos... It's the same thing that to list the toSeenVids (the old videos are in the yetSeenVids but not in the available list). Then you will be able to define a new cookie list before to renew the cookie. Good Luck !
Copy linkTweet thisAlerts:
@sallamauthorFeb 16.2012 — I've tried your script, but each time I reload the page, 4 pop-ups show up with messages like yetseenvids..

How to not show such popups?

btw, I'm using this as a sidebar box in my forum, so I've removed the html and body tags, is that Ok?
Copy linkTweet thisAlerts:
@007JulienFeb 16.2012 — It to see what the script does !
[CODE]// Replace the line
alert("YetSeenVids "+yetSeenVids);
// By a comment like this
// alert("YetSeenVids "+yetSeenVids);
[/CODE]
Then try to understand what you do and learn a little javascript...
Copy linkTweet thisAlerts:
@sallamauthorFeb 16.2012 — I've commented the 4 alerts. The pop-ups are gone now.

But the script is not working. Still videos get repeated before the rest of them are displayed.

See for yourself please:

http//:www.gawaher.com
Copy linkTweet thisAlerts:
@007JulienFeb 16.2012 — I do not understand ? The proposed script work fine in spite of an error to renew the list.
[CODE]if (!toSeeVids.length) {// No more videos : kill the cookie and recall this function
setCookie("seenVids","",-7);setTimeout(listVid[COLOR="Red"]s[/COLOR],50);}
else chooseVids(); [/CODE]


Edit : See your source code. The copy distroy the regExp which is to replace with this line !
[CODE]
r=new RegExp("[COLOR="Red"]\b[/COLOR]"+availableVids[i]+"[COLOR="Red"]\[/COLOR]b","g");
[/CODE]
With anti-slashs and not & # 0 9 2 ; without spaces !
Copy linkTweet thisAlerts:
@sallamauthorFeb 16.2012 — In a test page , it worked perfectly, yet in the forum still same video repeated before the others finish displaying.

Here is the first alert in the test page, reloaded 10 times:

YetSeenVids kn5NSCJ2tiI

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM,Zs9u7X0rrd0

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM,Zs9u7X0rrd0,aF4M0JtoIPk

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM,Zs9u7X0rrd0,aF4M0JtoIPk,BDxDMCWShds

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM,Zs9u7X0rrd0,aF4M0JtoIPk,BDxDMCWShds,D4L0KpqNzkU

YetSeenVids kn5NSCJ2tiI,ffZUWZQE0EU,KMxWhovYfzc,D-JJpPBjQwI,Mfdnb0Q7IBM,Zs9u7X0rrd0,aF4M0JtoIPk,BDxDMCWShds,D4L0KpqNzkU,povUgNcf4aI
Copy linkTweet thisAlerts:
@sallamauthorFeb 16.2012 — 
Edit : See your source code. The copy distroy the regExp which is to replace with this line !
[CODE]
r=new RegExp("[COLOR="Red"]\b[/COLOR]"+availableVids[i]+"[COLOR="Red"]\[/COLOR]b","g");
[/CODE]
With anti-slashs and not & # 0 9 2 ; without spaces ![/QUOTE]


I see. How can I avoid this then please?
Copy linkTweet thisAlerts:
@007JulienFeb 16.2012 — It's a problem with your editor... I use PsPad which allow this corrections in FTP mode. Since rewrite this characters before to transfer the page on the server.
Copy linkTweet thisAlerts:
@007JulienFeb 16.2012 — The same problem appears with the function [I]getCookie[/I] in the line
[CODE]x=x.replace(/^s+|s+$/g,"");[/CODE]Nevertheless your script includes like in this line[CODE]ipb.vars['seo_params'] = {"start":"-","end":"/","varBlock":"/page__","varSep":"__"};[/CODE]
Copy linkTweet thisAlerts:
@bakjooJun 22.2015 — Hi if I have the videos on my server what will the code be the
×

Success!

Help @sallam spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...