JavaScript - Xmlhttprequest During Autoplay Of Playlist

Hi,

Is there any possibility of having the JW player playlist at the bottom.

If possible can anyone post the javascript and its attribute for that.

Thanks,

Ananth

Hi there everyone I'm new here and to the world of coding in general. I have my own site now on it's third build. The second build was done by a someone else using ASP and database type things, which I don't really understand. Since I can no longer seem to contact him I'm trying to update the site myself but I'm having some trouble.

I have a page on my site which contains a flash video player with and xml based playlist, however when I access this page from my main computer the page produces an error message which reads 'playlist could not be loaded due to cross-domain policy restrictions'. If I add www. to the address then it works fine. I'm unsure of how to rectify this or whether it is a problem for anyone else viewing the site:

williammorrismusic.com/video.asp

Below is the code I have used for the player:

Code:

<script type='text/javascript' src='http://www.williammorrismusic.com/swfobject.js'></script>
 
<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('player.swf','mpl','640','560','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('playlistfile','http://www.williammorrismusic.com/playlist.xml');
  so.addVariable('backcolor','000000');
  so.addVariable('frontcolor','ffffff');
  so.addVariable('lightcolor','ffffff');
  so.addVariable('screencolor','000000');
  so.addVariable('playlist','bottom');
  so.write('mediaspace');
</script>

Any help on this would be most appreciated.

I've also posted this in the java section I think in error, if it is I apologize and please remove it.

Hi all !

I was searching for this problem over and over in here adn other websites but coudn't find any solution. Ok here is the problem:

I made a video playlist in XML. Here is how it looks like:
Code:

<videotemplate>
	<videoblock>
		<video id="1">
			<title>test1</title>
			<src>sd.webm</src>
			<img>diagnoza.jpg</img>
		</video>
		<video id="2">
			<title>test2</title>
			<src>video.webm</src>
			<img>resident.jpg</img>		
		</video>
		<video id="3">
			<title>test3</title>
			<src>sd.webm</src>
			<img>resident.jpg</img>
		</video>	
	</videoblock>
	<videoblock>
		<video id="4">
			<title>test4</title>
			<src>video11.webm</src>
			<img>resident.jpg</img>
		</video>
		<video id="5">
			<title>test5</title>
			<src>video4.webm</src>
			<img>resident.jpg</img>
		</video>
		<video id="6">
			<title>test5</title>
			<src>video5.webm</src>
			<img>resident.jpg</img>
		</video>		
</videotemplate>

Them I am using this javascript + XLST to play next file:
Code:

<script type="text/javascript">
		function nextSrc<xsl:value-of select="@id" />() {
		var myvideo = document.getElementsByTagName('video')[0];
		myvideo.src="file://d:/cis/guide/<xsl:value-of select="videoblock/video/following::src" />";
		myvideo.load();
		}
</script>

When I use nextSrc function video flips to next xml record with <src> tag but it only does that once!

How to make it flip to next video every time ??

Please help !

Hi there,

Im looking for a general function which would work for most browsers when using the xmlhttprequest() I am just trying to send input data to the server store it and send back a response.

I have one that works for both ie and ff, however when using ff the function does not return the text from the request to the server, but does with ie no problems.

Any help would be much appreciated.

Thanks

Code:

/* get response http request */
function getData(cURL) {
	var xmlHttp = null;
	xmlHttp = new XMLHttpRequest();
	/* branch logic for ff or ie */
	if (navigator.appName=='Netscape')
		lSynch = true;
	else
		lSynch = false;
	xmlHttp.open( "POST", cURL, lSynch );
	xmlHttp.send( null );
	var info = xmlHttp.responseText;
	return info;
}

Ok, so I have built a website using galleryCMS, a pre-built CMS for images, which outputs XML via php to an address of:

http://www.granitesupermarket.ca/login.php/view/xml

Firefox and Chrome can pull the XML from the webpage using my code, however IE does nothing with it at all. I have found that if I use a page with a proper xml extension then the code works fine (ie test.xml); however, without the .xml it seems like IE does nothing??

I am not the most advanced user, so tampering with the CMS is not the best option for me... is there any workaround that I might be able to employ? Maybe a way I could take the xml I get from "login.php/view/xml" and save it to gallery.xml on the same server? Any help or ideas would be helpful.

Code:

<html>
<head>
<title></title>
<head>
<body>
<script type="text/javascript">

// Get XML function
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

// XML source
xmlDoc=loadXMLDoc("login.php/view/xml")

t=xmlDoc.getElementsByTagName("thumbnail");

// TEST THAT XML IS WORKING
document.write(""+ t[0].childNodes[0].nodeValue + "");


</script>

</body>

</html>

I tried posting this same thread under AJAX and I didn't get a single response. I am wondering if it may be in the wrong section so I decided to try here. If this is bad posting etiquette, I apologize.

Hello. I am trying to use a form to submit values to MySQL and then
have a Google map returned that has certain parameters. I have modeled this code after an example I found on w3schools. I believe that this is strictly a javascript coding problem. This is the code
that I am using:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
#filter {
       height: 5%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto }
#txtHint {
       height: 20%;
       width: 73%;
       margin-top: 5px;
       margin-left: 2%;
       border: 3px solid black;
       padding: 1%;
       overflow: auto
       }
#maplist {
   height: 60%;
   width: 75%;
   margin-top: 5px;
   margin-left: 2%;
   border: 3px solid black }

</style>

<script type="text/javascript">

function showTrail(str)
{
if (str=="")
{
document.getElementById("maplist").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","traillist2.php?q="+str,true);
xmlhttp.send();
}

</script>

</head>
<body>
<div id="filter">
<form name="filterform">
<select id="scenery" onchange="">
<option value="">Select Scenery Rating:</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="f">F</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="length" onchange="">
<option value="">Select Trail Length</option>
<option value="g">Less than 1</option>
<option value="h">1-2.9</option>
<option value="i">3-4.9</option>
<option value="j">5-6.9</option>
<option value="k">7-8.9</option>
<option value="l">More than 9</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="difficulty" onchange="">
<option value="">Select Trail Difficulty</option>
<option value="m">Easy</option>
<option value="n">Moderate</option>
<option value="o">Strenuous</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="combined" type="button" value="      Find Trail!
"onclick="showTrail(this.form['scenery'].value +
this.form['length'].value + this.form['difficulty'].value)"/>
</form>
</div>
<div id="maplist"></div>
</body>
</html>

The code is designed to drop the map into the "maplist" div. In the
code above, you see that I have the line


"alert(xmlhttp.responseText);"



which was originally:


document.getElementById("txtHint").innerHTML=xmlhttp.responseText;"


I wrote the php page so it would return code as shown below. This is the actual responseText received from the alert.

Code:

script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(34.65, -83.9);
var options = {
   zoom: 9,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.TERRAIN
   };
var infoWindow = new google.maps.InfoWindow;
var html;
var map = new google.maps.Map(document.getElementById('map_canvas'),
options);
var point = new google.maps.LatLng(
parseFloat(34.558350),
parseFloat(-84.250122));
var marker = new google.maps.Marker({
  position : point,
  map : map,
  icon : 'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
var html = '<div><br><b>Amicalola Falls State Park - Creek Trail</
b><br><br><b>Trail Length:&nbsp;&nbsp;</b>0.5 miles<br><b>Scenery
Rating:&nbsp;&nbsp;</b>C<br><b>Difficulty Rating:&nbsp;&nbsp;</
b>Easy<br><b>Trail Features:&nbsp;&nbsp;</b>Stream<br><br><font
size:large><font face="Tahoma, Geneva, sans-serif" size="1"
color="#000071"><strong><a href="http://www.digitaltrailguide.com/
amicalolafallsstateparkcreekmountainlaurelspringtrails.aspx">View This
Trail</a></strong></font></div>';
bindInfoWindow(marker, map, infoWindow, html);
function bindInfoWindow(marker, map, infoWindow, html) {
     google.maps.event.addListener(marker, 'click', function() {
       infoWindow.setContent(html);
       infoWindow.open(map, marker);
     });
   }
}
function loadScript() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src = "http://maps.google.com/maps/api/js?
sensor=false&callback=initialize";
   document.body.appendChild(script);
 }
 window.onload = loadScript;
</script>I thought that this code would be dropped into the div and

I'm starting to learn javascript and trying to get the below code to work with newer browsers. I'm not sure how to implement the below to make it work with XMLHttpRequest. There is a small form that uses this function to allow you to select an xml file to load. Your help is much appreciated. Thanks.

Code:

		function importXML() {
			
			
			if (document.implementation && document.implementation.createDocument) {
				xmlDoc = document.implementation.createDocument("", "", null);
				xmlDoc.onload = createQuiz;
			}
			else if (window.ActiveXObject) {
				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");	
					xmlDoc.onreadystatechange = function () {
						if (xmlDoc.readyState == 4) createQuiz()
					};
			}
			else {
				alert('Your browser cannot handle this script');
				return;
			}
			xmlDoc.load(document.getElementById('file').value);
		}

Hello Everyone,
Recently started using JW Player and I am very pleased so far!

Did anybody have a script for making a playlist [xml file]. I hope to add java code or script (or html if possible) to play the playlist
according to a schedule (year, month, day, hour, minute, second) so that, when a user opens the website, the correct video and, ideally, the correct point within the video, opens up according to the day, hour, and minute that the page is opened. This will give the impression of a "live" or "real time" broadcast.

If any body could solve my problem I am very grateful to them.

I currently found a script that loads an ASX playlist dinamically, allowing the user to choose the item that he wants to watch in Windows media player embedded.
The trouble is that once the user click on the link in the playlist it wont work.
Take a look here http://tv.mghospedagem.com/wmp-pl3.html

Works only on IE.


Code:

<head>
<script language="javascript1.2">

playListLoaded=false;


function loadPlayItems() {
        df=document.getElementById("playItem");
        dp=document.getElementById("playlist");
        WMP9=document.getElementById("MediaPlayer1");

WMP9.url="http://tv.mghospedagem.com/play.asx";
        WMP9.controls.play();

}

function showPlayItems() {
        WMP9=document.getElementById("MediaPlayer1");
        playlistItems=WMP9.currentPlaylist.count;
        for (i=0; i<playlistItems; i++) {
                playitem=document.createElement("a");
                playnext=document.createElement("br");
                playitem.setAttribute("href","#");
                playitem.setAttribute("onclick","playItem("+i+")");
                playitem.innerText=WMP9.currentPlaylist.item(i).name;
                dp.appendChild(playitem);
                dp.appendChild(playnext);
        }
        playListLoaded=true;
        WMP9.controls.play();

}



function setPlayItem(index) {
        WMP9=document.getElementById("MediaPlayer1");
        playlistItems=WMP9.currentPlaylist.count;
        if (playlistItems > 0) {

WMP9.controls.currentItem=WMP9.currentPlaylist.item(index);
                WMP9.controls.play();
        }
}

</script></head>

<body onLoad="loadPlayItems()">
<object id="MediaPlayer1"
classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type="application/x-oleobject" width="600" height="400">
<param name="autostart" value="1">
        <param name="showcontrols" value="1">
        <param name="uimode" value="full">
        <param name="stretchtofit" value="1">
        <param name="enablecontextmenu" value="0">
</object>

<div id="playlist" style="position: absolute; top: 10px; left:
640px; visibility: visible; z-index: 999999999999999;">
<h2>Playlist</h2></div>

<script language="javascript1.2" for="MediaPlayer1"
event="playStateChange">
WMP9=document.getElementById("MediaPlayer1");
if (WMP9.playState==3 && ! playListLoaded) {
        showPlayItems();
}






</script>

Hi

I am trying to implement a scroll to DIV (i.e. smooth scrolling with some easing) on various events in jPlayer, a javascript audio playlist. Essentially the playlist is in a scrolling DIV with scrollbars and mousewheel scrolling, and when the track changes I would like it to trigger a scroll to the currently playing track, i.e. the new track, such that it is centred vertically in the DIV (which has a variable height).

I thought I would start first with trying to add some code to the #jplayer_next event which usually looks like this:

Code:

$("#jplayer_next").click( function() {
		playListNext();
		$(this).blur();
		return false;
	});

I came up with the following code to add:

Code:

$("#jplayer_playlist").scrollTop($(".jplayer_playlist_current").offset().top);

where #jplayer_playlist is the scrolling DIV and .jplayer_playlist_current is the class of the currently playing track. The code does do something, but I am seeing fairly nonsensical jumping around the div, which does seem somewhat related to the currently playing track, but certainly not what I am looking for.

You can see the playlist here. The currently playing track is highlighted in green, and, when you click on the next button, the DIV certainly isn't scrolling smoothly to the currently playing track!

If someone could help me amend the code to get this working properly I'd be grateful.

Thanks,

Nick

Hi,
because i need to get rid off Code:

<iframe src="my.php">

in my html page, i have decided to replace it with javascript function which will get data from the server and will insert it into div section.But i dont know how can i obtain html page from my.php script... I know there is function XMLHttpRequest, but does it use current session from the browser ( my.php is protected - it does check the $_SESSION variable ) ? And does work this function in Mozilla ?

hello all,

I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code:

<script type="text/javascript">
function getXMLcontent() {
if (window.XMLHttpRequest)
  
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  	document.getElementById('CollapsiblePanel1').style.visibility = 'visible';
	document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText;
  	xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true);
	xmlhttp.send();
	alert("showfunction.php?fname=" + document.getElementById('functions').value);
}
</script>

the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be?

the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'??

thanks!

I've been working for some time trying to get XMLHTTPRequests to work. Nothing doing. The code seems simple enough, but I can't duplicate it on my own. I have two pages on the same PC. Code to follow. Please help me see the problem:

Page One - Originator
<code>
<html>

<head>

<title>Origination</title>
<script type='text/javascript'>
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
//activeX versions to check for in IE
if (window.ActiveXObject){
//Test for support for ActiveXObject in IE
//first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
return new XMLHttpRequest();
else
return false;
}

//Usage:
//new ajaxRequest()

function getStuff() {
var getdata = new ajaxRequest();
if (getdata.readyState==4){
if (getdata.status==200){
var htmldata=getdata.responseText
var txtfields = htmldata.getElementsByTagName('input');
alert(txtfields);
}
else{
alert('An error has occured making the request');
}
}
getdata.open('POST', 'test.html', true);
getdata.send(null);
}

</script>
</head>

<body>
<h5>Origination</h5>
<form <form action="file:///test.html" method="post" enctype="text/plain">
<input type='text' name='homepage' value=''/>
<input type='button' name='getit' value='GetSome' onclick='getStuff()'/>
</form>
</body>

</html>
</code>

Page Two - The Target Page:
<code>
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"/>
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"/>

<style type="text/css">
html {font-family: arial; font-size: 0.8em; }

</style>
</head>
<body>
<div id="wrapper">
<form action="file:///eyec.html" method="post" enctype="text/plain">
<input type='text' name='first' value='First Field'/>
<input type='text' name='second' value='Second Field'/>
<input type='text' name='third' value='Thrird Field'/>
<input type='text' name='fourth value='Fourth Field'/>
</form>
</div> <!-- wrapper -->
</body>
</html>
</code>

I'd deeply appreciate correction. Thanks.

This question hovers between PHP and JavaScript, but I think it fits here a little better.

I've got a web app that does a lot of asynchronous calls to various PHP pages. I'm familiar with using an iFrame or div to hold a controller, then making forms post to that controller so you can see the output. However, I'm not doing a lot of submitting forms. Typically, I utilize the onclick event of various elements to initiate an XmlHttpRequest that jumps over to a PHP page and back.

I'm looking for a way to easily debug my PHP code. Right now I'm using Firebug (on Firefox) to look at the HTTP requests. I can see the post data and response and all that, which is good. However, it requires a good amount of clicking and time to get to that data.

Is there an easier way to do this? Ideally I'd love to include some sort of debug window that displays all of the PHP controller errors and things that I echo out.