You should go through a basic JavaScript DOM tutorial then lookup references using Google for functions like getElementById, and maybe also html definitions for things like "elements". An element is an HTML tag on a webpage that allows for more HTML. Basically like an HTML code seperator or even object like a textbox or button. A URL like "http://www.whatever.com/page" is NOT an element. It is a reference to a new page. Please provide more code along with a description of what you need to accomplish.
...
var vids=[
["http://www.youtube.com/embed/aF4M0JtoIPk", ">>>>SONG NAME 1<<<<"],
["http://www.youtube.com/embed/KMxWhovYfzc", ">>>>SONG NAME 2<<<<"]
];
function pick_vid ( )
{
var numberOfImages = 2;
var num = rand(numberOfImages)-1;
document.getElementById("random_youtube_vid").src = vids[num][0];
document.getElementById("LINK").innerHTML = vids[num][1];
}
...
Last edited by Padonak; 03-31-2012 at 01:00 PM.
Reason: typo
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
ty so much , so pro !!!!
i have one more question to ask about this code ?
Code:
var vids=[
["aF4M0JtoIPk", ">>>>SONG NAME 1<<<<"],
["KMxWhovYfzc", ">>>>SONG NAME 2<<<<"]
];
can i remove this part from script "http://www.youtube.com/embed/" and put it in iframe ?
for exemple <iframe id="http://www.youtube.com/embed/"+"random_youtube_vid"></iframe> or something like that ?
...
var vids=[
["aF4M0JtoIPk", ">>>>SONG NAME 1<<<<"],
["KMxWhovYfzc", ">>>>SONG NAME 2<<<<"]
];
function pick_vid ( )
{
var numberOfImages = 2;
var num = rand(numberOfImages)-1;
var prefix = "http://www.youtube.com/embed/";
document.getElementById("random_youtube_vid").src = prefix+vids[num][0];
document.getElementById("LINK").innerHTML = vids[num][1];
}
...
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
that was fast ... thank you so much , this will help me better understand jquery scripting !!!!
and i just add suffix xD for auto play ....
Code:
var numberOfImages = 2;
var num = rand(numberOfImages)-1;
var prefix = "http://www.youtube.com/embed/";
var suffix = "?rel=0&am;autoplay=1";
document.getElementById("random_youtube_vid").src = prefix+vids[num][0]+suffix;
document.getElementById("LINK").innerHTML = vids[num][1];
is there any chance to add this code next button ?
current song + 1 = next song ... something like that
and when number is over max go back to first song
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:30px;}
a:link,a:active,a:visited{color:#000;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
a:hover{color:Crimson;background-color:transparent;font-weight:bold;letter-spacing:1px;text-decoration:none;}
div{margin-top:5px;padding:20px;}
b{color:Crimson;}
.cur{color:Green;background-color:transparent;}
.tot{color:Darkorange;background-color:transparent;}
</style>
<script type="text/javascript">
//we can use this synthax instead of var1=...;var2=...; etc.
var prefix="http://www.youtube.com/embed/",
suffix="?rel=0&am;autoplay=1",
vids=[
["aF4M0JtoIPk", "Reborn - Amina Khan"],
["KMxWhovYfzc", "New Muslims in Europe"],
["1eUOgD2Y9c8", "My Reversion To Islam"],
["hp0Wn8BoKyA", "Islam Saved My Life"]
];
function randomNumber(m,n){m=parseInt(m);n=parseInt(n);return Math.floor(Math.random()*(n-m+1))+m;}
function pick_vid(){
var num=(typeof(pick_vid.arguments[0])!='undefined')?pick_vid.arguments[0]:randomNumber(0,vids.length-1);
if(num==vids.length){num=0;}
/*the above means that you can pass the number of desirable song into the function
but if no any arguments passed the function picks a random song*/
$('#youtube_vid').attr('src',prefix+vids[num][0]+suffix);
$("#descr").html(vids[num][1]);
var ending='';
switch(num+1){
case 1:ending='st';break;
case 2:ending='nd';break;
case 3:ending='d';break;
default:ending='th';
}
$('#counter').html('<b class="cur">'+(num+1)+'-'+ending+'</b> of <b class="tot">'+vids.length+'</b> videos is being played now<br /><br /><a href="#null" onclick="pick_vid('+(num+1)+')">play next</a>');
}
$(document).ready(function(){
//just for fun
var h2=function(){$('h2:has(b:contains("JQuery"))').fadeOut('slow',function(){$(this).remove();});}
setTimeout(h2,1000);
});
</script>
</head>
<body>
<center>
<iframe id="youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe>
<div id="descr">song name goes here</div>
<div id="counter"><h2>Ok let's use <b>JQuery</b> as we went so far ;-)</h2></div>
<div><a href="#null" onclick="pick_vid()">random song</a></div>
</center>
</body>
</html>
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
we know too much...we went so far
this is my last question in this topic ... ty so much ... you give me good player script for my forum its so cool
when user load this script, can random song start autoplay without clicking on random button ?
$(document).ready(function(){
//just for fun
var h2=function(){$('h2:has(b:contains("JQuery"))').fadeOut('slow',function(){$(this).remove();});}
setTimeout(h2,1000);
});
with
Code:
$(document).ready(function(){
pick_vid();
});
and of course remove that h2 tag from the markup - it was just for fun
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
<script type="text/javascript">
var prefix="http://www.youtube.com/embed/", suffix="?rel=0&am;autoplay=1"; //we can use this synthax instead of var1=...;var2=...; etc.
vids=[
["aF4M0JtoIPk", "Reborn - Amina Khan"],
["KMxWhovYfzc", "New Muslims in Europe"],
["1eUOgD2Y9c8", "My Reversion To Islam"],
["hp0Wn8BoKyA", "Islam Saved My Life"]
];
function randomNumber(m,n){
m=parseInt(m);n=parseInt(n);return Math.floor(Math.random()*(n-m+1))+m;
}
function pick_vid(){
var num=(typeof(pick_vid.arguments[0])!='undefined')?pick_vid.arguments[0]:randomNumber(0,vids.length-1);
if(num==vids.length){num=0;}
if (num==-1){num+=vids.length;}
$('#youtube_vid').attr('src',prefix+vids[num][0]+suffix);
$("#descr").html(vids[num][1]);
var ending=' ';
switch(num+1){
case 1:ending='st';break;
case 2:ending='nd';break;
case 3:ending='d';break;
default:ending='th';
}
$('#counter').html('<b class="cur">'+(num+1)+'-'+ending+'</b> of <b class="tot">'+vids.length+'</b> videos is being played now<br /><a href="#null" onclick="pick_vid('+(num+1)+')">NEXT SONG</a><a href="#null" onclick="pick_vid('+(num-1)+')">PREV SONG</a>');
}
$(document).ready(function(){pick_vid();}); //autoplay random start
</script>
<iframe id="youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe>
<div id="descr">SONG TITLE</div><div id="counter"></div><div><a href="#null" onclick="pick_vid()">RANDOM SONG</a></div>
Reply With Quote
Originally Posted by ludaludi
thank you so much , this will help me better understand jquery scripting !!!!
Bookmarks