get info from URL and set as a javascript variable

jarvis · June 27, 2011

Hi All,

Im trying to use PHP to get some info from URLs, once I have the data, I wish to set it in a seperate javascript file as a variable. Firstly, is this even possible?

My links are like so:

http://www.facebook.com/#!/video/video.php?v=

http://www.youtube.com/watch?v=

I wish to use PHP to get the link type, either facebook or youtube. Like so:

var URLtype = "";

So I can then build a dynamic flash media player but need it for this line:

html += '<embed src="http://www.'+URLtype+'.com/v/'+id+autoPlay+showRelated+fullScreen+'"';

I hope someone can help as I can't seem to work it out :-(

TIA

jarvis

WebStyles · June 27, 2011

if you do something like this:

<div id="divname">someValue</div>

then you can grab the value into javascript with something like

var text1 = document.getElementById("divname").innerHTML;

or you can use hidden form elements and grab the elements value from javascript.

So in short, yes, it's possible to get a php value into javascript, but you need to make sure the value is set and placed in a place where you can access it from js before your javascript code runs.

TeNDoLLA · June 27, 2011

<?php
$url = 'http://www.facebook.com/#!/video/video.php?v=';

$temp = (parse_url($url));
$host = $temp['host'];
if ($host === 'www.facebook.com')
{
$URLtype = 'facebook';
}
else if ($host === 'www.youtube.com')
{
$URLType = 'youtube';
}
?>
<html>
<head><title></title>
<script type="text/JavaScript"
var URLType = <?php echo isset($URLType) ? $URLType : ''; ?>;
// then just use ur URLType variable in JS...
</script>
</head>
<body></body>
</html>

jarvis · June 27, 2011

Thanks Webstyles, I think that makes sense! I've set a div:

<div id="ytvideo"></div>

This shows the video selected from a list of videos in the main player. I've then added this line to my seperate js file:

var theURL = document.getElementById("ytvideo").innerHTML;

Then I altered the 2 lines in my emved code like so:

html += '<param name="movie" value="http://www.'+theURL+'.com/v/'+id+autoPlay+showRelated+fullScreen+'"> </param>';

AND

html += '<embed src="http://www.'+theURL+'.com/v/'+id+autoPlay+showRelated+fullScreen+'"';

This seperate file is called from the other doc

<script src="js/jquery.youtubeplaylist.js" type="text/javascript"></script>

Sadly, it doesn't seem to work. Is is because it's a seperate js doc or will that line you kindly recommended retrieve the info regardless?

TIA

jarvis · June 27, 2011

Thanks TeNDoLLA but it's not getting the main URL it's from one within the page - sorry, I should've made that clear.

It's so I can use this:

http://www.geckonewmedia.com/blog/2009/8/14/jquery-youtube-playlist-plugin---youtubeplaylist but for facebook and youtube. However, I'm trying to make it dynamic with a php cms hence why I'm on this forum :-) I think it may be more js though :-(

WebStyles · June 27, 2011

var theURL = document.getElementById("ytvideo").innerHTML;

will only work if there's actually some text inside your <div>

if you do this:

<div id="ytvideo">www.facebook.com</div>

then your javascript var theURL should grab the value www.facebook.com

Andy-H · June 27, 2011

<?php
$url = 'http://www.facebook.com/#!/video/video.php?v=';

if ( stristr($host, 'facebook') )
{
   $URLtype = 'facebook';
}
else if ( stristr($host, 'youtube') )
{
   $URLType = 'youtube';
}
?>
<html>
<head><title></title>
<script type="text/JavaScript"
var URLType = <?php echo isset($URLType) ? $URLType : ''; ?>;

</script>
</head>
<body></body>
</html>

stristr

jarvis · June 27, 2011

Thanks WebStyles but doesn't <div id="ytvideo"></div> have the URL as it's got a holderID? Perhaps my understanding of how it works is wrong. The demo: http://geckohub.com/jquery/youtubeplaylist/ may explain what I mean? Sorry :-(

WebStyles · June 27, 2011

is just an empty div with a name. it won't have any content unless you put some into it. if you have a php variable with the content you wish to pass on to js, just echo it. this is just one way of doing it, and unless you set the div to hidden, the url will display on your page.

<div id="ytvideo"><?php echo $url;?></div>

alternatively you can also use hidden form elements. And I'm quite sure Andy-H's example should work fine too.

TeNDoLLA · June 27, 2011

Now I am a bit confused what is your goal and what you got now? Also instead of this

var contentInElement = document.getElementById("ytvideo").innerHTML;

You should just use the jquery functions since you are already using the jquery anyway

var contentInElement = ('#ytvideo').html();

but this aint giving any URL for you with the HTML you are having though.

Andy-H · June 27, 2011

Show your full code for the 2 pages involved.

You know you can save your javascript file as file.js.php and run php in it?

test.js.php

<?php
$url = 'http://www.facebook.com/#!/video/video.php?v=';

if ( stristr($host, 'facebook') )
{
   $URLtype = 'facebook';
}
else if ( stristr($host, 'youtube') )
{
   $URLType = 'youtube';
}
?>
$(document).ready(function() {
   var URLType = <?php echo $URLType; ?>;
   alert(URLType);
});

index.php

<html>
<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="test.js.php"></script>
</head>
<body>
</body>
</html>

jarvis · June 27, 2011

Thanks again WebStyles and Andy-H.

Here's the webpage:

	<!-- main loading area -->
	<div id="ytvideo"></div>
	<!-- /main loading area -->

	<!-- youtube library holder -->
	<div class="yt_holder">	

	<div class="yt_holder_title">More films</div>

			<!-- 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 -->

	</div>
	<!-- /youtube library holder -->

At the top of the page is the following js include:

	<script src="js/jquery.youtubeplaylist.js" type="text/javascript"></script>		
	<script type="text/ecmascript">
			$(function() {
				$("ul.demo").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo'});
			});
	</script>

The js file jquery.youtubeplaylist.js has the following:

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 theURL = document.getElementById("ytvideo").innerHTML;
	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(id)
	{
	   var html  = '';

	   html += '<object height="'+options.playerHeight+'" width="'+options.playerWidth+'">';
	   html += '<param name="movie" value="http://www.'+theURL+'.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.'+theURL+'.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=([^&#]*)");
		ytid = ytid[1];
		return ytid;
	};


	//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;
	});

I know that the container with id=ytvideo will remain empty at all times and is just a reference point for the js (above). I somehow need to grab the URL of the selected video in order to determine if it's a facebook URL or youtube URL. That way I can get the code to update the flash player in the js code. Otherwise I can only get it to work with one or other due to this line:

html += '<embed src="http://www.youtube.com/v/'+id+autoPlay+showRelated+fullScreen+'"';

Does that help?

Thanks, your patience & assistance is really REALLY appreciated!! :-)

WebStyles · June 27, 2011

hmm....so you have a list of videos you're trying to play/display without refreshing the page? why not just call a js function and pass the url to it?

jarvis · June 27, 2011

It's purely been done that way so we can style the page how we want, give the effect we're after and equally, it's going to be a dynamic list, so the client can upload the facebook or youtube URL. This way seemed the best option (at the time!). The code we have seems simple enough, I really didnt think it'd be this cumbersome trying to detect a facebook or youtube link you see :-(

TeNDoLLA · June 27, 2011

You can get the URL's with jquery for example like this:

$('ul.demo li a').each(( function() {
alert($(this).attr('href'));
}));

jarvis · June 27, 2011

Thanks TeNDoLLA but I'm not sure how best to use that? Sorry to sound daft!

What if a link was given a class value, i.e. facebook or youtube. Could I then get the class from the link and use that instead?

Andy-H · June 27, 2011

//-------------------------------------------------
//		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: '300',
playerWidth: '450',
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];
	   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);

		});	

	}


   
  });

};

Try this (untested) defo wont work for thumb images.

jarvis · June 27, 2011

Thanks Andy-H

I've tried it but to no avail. I notice the embed code has

'+urlType+'

However, I can't see that in your code as a variable. Should it be there?

Andy-H · June 27, 2011

put

alert(options);

in the play function and post back the result.

jarvis · June 27, 2011

Hi,

It's showing the video ID then facebook or youtube (depending which video I click)

Thanks

Andy-H · June 27, 2011

now try

alert(urlType);

after its definition.

jarvis · June 27, 2011

Sorry, when you say after its definition? Where do you mean :-( embarassed

jarvis · June 27, 2011

Like so:

		var id        = options[0];
		var urlType   = options[1];
		//alert(options);
		alert(urlType);

That returns facebook or youtube without the vid id

Andy-H · June 27, 2011

So that should return the url as you requested? Are there any changes in the url between facebook and youtube vids?

jarvis · June 27, 2011

No, no changes. It's odd then as I see what it should do, it should return in the URL that alert, i.e. facebook or youtube.

Pretty cool but odd it won't work. Hmmm....

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

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