get info from URL and set as a javascript variable

Andy-H · June 27, 2011

alert(html);

and run it in a separate file?

jarvis · June 27, 2011

Ok created a new js file called temp, added the above. Added it as an include but nothing happens. I'm guessing something should?

Thanks

Andy-H · June 27, 2011

Sorry, run the html alerted in a separate file lol

jarvis · June 27, 2011

Erm you mean in a new html doc right? On its own with nothing else??

Andy-H · June 27, 2011

Yeh

jarvis · June 27, 2011

That doesn't do anything either:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
alert(html);
</script>
</head>

<body>
</body>
</html>

Appreciate this! I feel such a noob

jarvis · June 27, 2011

Forgot to add, it has a js error:

html is undefined

Andy-H · June 27, 2011

I mean alert the html in the script you already have, copy the html in the alertbox and paste it into a new file. lol

jarvis · June 27, 2011

Sorry, you 've lost me. :-(

The alert wont work if I use it in the current file or a new one

Andy-H · June 27, 2011

I've just tested, it works for the youtube vids, the facebook url's work differently, plus you need to be logged in.

jarvis · June 27, 2011

Hmmm, so where am I going wrong?

The facebook vids I'm using should be ok but I am logged in.

Can I email you the scripts I'm using to see if I've missed something?

jarvis · June 27, 2011

Here's my complete js just incase I've missed something:

//-------------------------------------------------
//		youtube playlist jquery plugin
//		Created by dan@geckonm.com
//		www.geckonewmedia.com
//
//		v1.1 - updated to allow fullscreen 
//			 - thanks Ashraf for the request
//-------------------------------------------------

jQuery.fn.ytplaylist = function(options) {

  // default settings
  var options = jQuery.extend( {
    holderId: 'ytvideo',
playerHeight: '258',
playerWidth: '399',
addThumbs: false,
thumbSize: 'small',
showInline: false,
autoPlay: true,
showRelated: true,
allowFullScreen: false
  },options);
  
  return this.each(function() {

   		var selector = $(this);
	var autoPlay = "";
	var showRelated = "&rel=0";
	var fullScreen = "";
	if(options.autoPlay) autoPlay = "&autoplay=1"; 
	if(options.showRelated) showRelated = "&rel=1"; 
	if(options.allowFullScreen) fullScreen = "&fs=1"; 

	//throw a youtube player in
	function play(optionVars) {
		var options   = optionVars.split('|');
		var id        = options[0];
		var urlType   = options[1];
		//alert(options);
		//alert(urlType);
		var html  = '';
		html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">';
		html += '<param name="movie" value="http://www.'+urlType+'.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>';
		html += '<param name="wmode" value="transparent"> </param>';
		if(options.allowFullScreen) { 
			html += '<param name="allowfullscreen" value="true"> </param>'; 
		}
		html += '<embed src="http://www.'+urlType+'.com/v/'+id+autoPlay+showRelated+fullScreen+'"';
		if(options.allowFullScreen) { 
			html += ' allowfullscreen="true" '; 
		}
		html += 'type="application/x-shockwave-flash" wmode="transparent"  height="'+options.playerHeight+'" width="'+options.playerWidth+'"></embed>';
		html += '</object>';
		return html;
	};

	//grab a youtube id from a (clean, no querystring) url (thanks to http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html)
	function youtubeid(url) {
		var ytid = url.match("[\\?&]v=([^]*)");
		var regex  = /(facebook|youtube)/i;
		var type   = regex.exec(url);
			ytid = ytid[1];
			return ytid + '|' + type[0];

	};


	//load inital video
	var firstVid = selector.children("li:first-child").addClass("currentvideo").children("a").attr("href");
	$("#"+options.holderId+"").html(play(youtubeid(firstVid)));

	//load video on request
	selector.children("li").children("a").click(function() {

		if(options.showInline) {
			$("li.currentvideo").removeClass("currentvideo");
			$(this).parent("li").addClass("currentvideo").html(play(youtubeid($(this).attr("href"))));
		}
		else {
			$("#"+options.holderId+"").html(play(youtubeid($(this).attr("href"))));
			$(this).parent().parent("ul").find("li.currentvideo").removeClass("currentvideo");
			$(this).parent("li").addClass("currentvideo");
		}



		return false;
	});

	//do we want thumns with that?
	if(options.addThumbs) {

		selector.children().each(function(i){
										  
			var replacedText = $(this).text();

			if(options.thumbSize == 'small') {
				var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/2.jpg";
			}
			else {
				var thumbUrl = "http://img.youtube.com/vi/"+youtubeid($(this).children("a").attr("href"))+"/0.jpg";
			}


			$(this).children("a").empty().html("<img src='"+thumbUrl+"' alt='"+replacedText+"' />"+replacedText).attr("title", replacedText);

		});	

	}


   
  });

};

Odd yours works and mine wont so guessing I've not set something perhaps?

Andy-H · June 27, 2011

Sorry mate I'm at work at the moment, can't really do that here incase my boss see's

jarvis · June 27, 2011

Thats ok, sorry!

I just can't see why it wont work, especially as you say your one does! Just frustrating as I never thought this would turn out to be such a mare!

I do really appreciate your help though, especially as you're at work! :-)

Andy-H · June 27, 2011

No problem mate. Sorry I couldn't solve it.

jarvis · June 27, 2011

You've been more than helpful, thanks.

Will continue to try & work out what the issue is

jarvis · June 27, 2011

Thanks TeNDoLLA but how do I go about utilising that code?

TeNDoLLA · June 28, 2011

So how do you get the selected video from user? From click of a link or? This example uses the click event to determine the video type.

<html>
<head>
	<title></title>
	<script type="text/JavaScript" src="../js/jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js"></script>
	<script type="text/JavaScript">
	$(document).ready(function() {

		// For click event
		$('ul.demo li a').click(( function(event) {
			event.preventDefault(); // To prevent redirecting to the link location.
			var URL = $(this).attr('href');
			if (URL.match('/.*youtube.*/'))
			{
				// Link was youtube video, do something..
			}
			else if (URL.match('/.*facebook.*/'))
			{
				// Link was facebook video, do something..
			}
			else
			{
				// Something else..
			}
		}));
	});
	</script>
</head>
<body>
	<!-- video library -->
	<ul class="demo">				
	<li><a href="http://www.facebook.com/#!/video/video.php?v=123">Video 1</a></li> 	
	<li><a href="http://www.facebook.com/#!/video/video.php?v=456">Video 2</a></li>
	<li><a href="http://www.facebook.com/#!/video/video.php?v=789">Video 3</a></li> 	
	<li><a href="http://www.youtube.com/watch?v=w0ffwDYo00Q">Video 4</a></li>  															
	</ul>
	<!-- video library -->

</body>
</html>

Sign In

get info from URL and set as a javascript variable

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information