Free beer for martians

Hi
I’m trying to teach myself web design, and I’ve been reading up on DHTML from an ebook that I found on the internet.
The book is called “DHTML Utopia Modern Web Design Using JavaScript and DOM”, one of this sites books. Coming from Mars I have no idea, so
how do I create a temporary xml video playlist where members of my site can choose and select any video file, by copying and pasting,
from the titles on a PHP page that lists all the videos that are stored in the mysql database. I adapted the add a friend for FREE BEER code to the
following code so members could add their own videos.

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        fieldCount++;
        var newVideo = document.createElement('input');
        newVideo.type = 'text';
        newVideo.name = 'video' + fieldCount;
        newVideo.id = 'video' + fieldCount;
        document.getElementById('fs').appendChild(newVideo);
      }
    </script>
    <style type="text/css">
      input {
        display: block;
        margin-bottom: 2px;
      }
      button {
        float: right;
      }
      fieldset {
        border: 2px solid blue;
      }
      #h1 {
	      color: #00F;
}	
    #p {
	font-size: 20px;
}
    </style>
</head>
<body>
    <style1><span id="h1">Add Videos</span></style1>
<br>
<br>
    <form>
      <p>
        <label for="video" id="p">Video name</label>
      <input type="text" name="video" id="video">
      <fieldset id="fs">
        <legend id="p">Other videos you wish to add</legend></p>
        <button onclick="addVideo(); return false;">
          Add another video
        </button>
        <input type="text" name="video1" id="video1" max="250"> //Have I got the "max=250" in the right place and do I need to specify it somehow in the fieldCount in the header section
      </fieldset>
      <input type="submit" value="Save details">
    </form>
 </body>
</html>

I need the Save details button to create the temporary xml playlist file, this file needs to be saved in a diectory called wrmvlplayer
only for as long as the user remains on wrmvlplayer page, it needs to look something like this.

<videolist>
  <video>
    <file>videos/video1.mp4</file>
    <image></image>
    <title> MP4video </title>
    <description>A video.mp4</description>
  </video>
  <video>
    <file>videos/video2.mp4</file>
    <image></image>
    <title>MP4video</title>
    <description>A video.mp4</description>
  </video>
  <video>
    <file>videos/video3.mp4</file>
    <image></image>
    <title>MP4video</title>
    <description>A video.mp4</description>
  </video> //etc,etc,etc.
</videolist>

I also need this file to be named wrmvlplayer.xml, otherwise I don’t think it will work.
If anyone can help or at least point me in the right direction, it would be greatly appreciated, and thanx for taking the time to read this.

Hi studentofIT, welcome to the forums,

Wow, I haven’t seen mention of DHTML for absolutely ages. Even though the book touts to be “Modern DHTML” I see it’s from 2005

Anyway, HTML and Javascript alone won’t do this, you need a server. Got PHP?

Yes I have. I’m using Wamp server on my windows 7 desktop machine for as much testing as I can and when happy I upload everything to my LAMP web server, Ubuntu 11.10, for further analysis. I’m currently playing around with some PHP I outsourced on the internet, but to no avail yet, even though not proficient with PHP I seem to have a better understanding of it and am able to adapt it more to my needs than with Javascript, where I’m totally lost.

Ok I changed the above code to this, I’ve commented both bits of code where problems are, to make it easier

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        fieldCount++;
        var newVideo = document.createElement('input');
        newVideo.type = 'text';
        newVideo.name = 'video' + fieldCount;
        newVideo.id = 'video' + fieldCount;
        document.getElementById('fs').appendChild(newVideo);
      }
    </script>
    <style type="text/css">
      input {
        display: block;
        margin-bottom: 2px;
      }
      button {
        float: right;
      }
      fieldset {
        border: 2px solid blue;
      }
      #h1 {
       color: #00F;
}
    #p {
 font-size: 20px;
}
    </style>
</head>
<body>
    <style1><span id="h1">Add Videos</span></style1>
<br>
<br>
    <form action="createplaylist.php" method="post" target="_new"> //Changes made here
      <p>
        <label for="video" id="p">Video name</label>
      <input type="text" name="video" id="video">
      <fieldset id="fs">
        <legend id="p">Other videos you wish to add</legend></p>
        <button onclick="addVideo(); return false;">
          Add another video
        </button>
        <input type="text" name="video1" id="video1" max="250"> //Have I got the "max=250" in the right place and do I need to specify it somehow in the fieldCount in the header section
      </fieldset>
      <input type="submit" value="Save details">
    </form>
 </body>
</html>

and I’ve used this to create the XML file only trouble is it opens another window in IE 9, I need it to save temporarily in the players directory.

<?php
$Array_of_file_data = array();
$Array_of_file_data[0]['filename'] = "video.mp4"; //I need to echo actual file name here and not "video.mp4"
$Array_of_file_data[0]['title'] = "Title 1 One"; //This should be same as above file name ant not "Title 1 One"
$Array_of_file_data[1]['filename'] = "video.mp4"; //Same as above
$Array_of_file_data[1]['title'] = "Title 2 Two"; //Same as above
$Array_of_file_data[2]['filename'] = "video.mp4"; //Same as above
$Array_of_file_data[2]['title'] = "Title 3 Three"; //Same as above
$xml_data = '<?xml version="1.0" encoding="utf-8"?>'."\
";
$xml_data .= '<videolist>'."\
";
for($i=0;$i<sizeof($Array_of_file_data);$i++){
 $xml_data .= ' <item>'."\
";
 $xml_data .= '  <filename>'.urlencode($Array_of_file_data[$i]['filename']).'</filename>'."\
";
 $xml_data .= '  <title>'.urlencode($Array_of_file_data[$i]['title']).'</title>'."\
";
 $xml_data .= ' </item>'."\
";
}
$xml_data .= '</videolist>'."\
";
//I don't understand the code below and is it absolutely needed especially the "header("Expires: Thu, 22 March 2012 20:52:00 EST");"
header("Pragma: public");
header("Expires: Thu, 22 March 2012 20:52:00 EST");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Content-Type: text/xml");
print($xml_data);
exit;
?>

Oh yeah, when more than 1 member creates a playlist at similar time will each xml file created need a unique ID ? Thanx

I’ll copy this over to my localhost, test, and get back ASAP

Cheers Mittineague
Thats greatly appreciated.

Hi Mittineague
Just wondering if you’ve had any success with this as yet, been a week and I haven’t heard boo! I hope this can be accomplished and it hasn’t been put in the too hard basket, I would appreciate some sort of feedback even if you are still working on it, anything positive or negative is always welcome. Cheers mate.

Ok made a few changes again, and I’m able to save the xml file now, but its permanent. At least thats a start, the form input below has been chaged but still doesn’t
write to the xml file. I understand why it opens in a new tab in IE9 and thats better than losing the video player page to a blank page.

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        fieldCount++;
        var newVideo = document.createElement('input');
        newVideo.type = 'text';
        newVideo.name = 'file' + fieldCount; //Changed video to file here
        newVideo.id = 'file' + fieldCount; //Changed video to file here also
        document.getElementById('fs').appendChild(newVideo);
      }
    </script>
    <style type="text/css">
      input {
        display: block;
        margin-bottom: 2px;
      }
      button {
        float: right;
      }
      fieldset {
        border: 2px solid blue;
      }
      #h1 {
	      color: #00F;
}	
    #p {
	font-size: 20px;
}
    </style>
</head>
<body>
    <style1><span id="h1">Add Videos</span></style1>
<br>
<br>
    <form action="createplaylist.php" method="post" target="_new" enctype="multipart/form-data"> //This is better than losing the video player page to a blank page but its unwanted
      <p>
        <label for="video" id="p">Video name</label>
      <input type="text" name="file" id="file"> //Changed video to file here as well
      <fieldset id="fs">
        <legend id="p">Other videos you wish to add</legend></p>
        <button onclick="addVideo(); return false;">
          Add another video
        </button>
        <input type="text" name="file1" id="file1" max="250"> //Changed video1 to file1 here
      </fieldset>
      <input type="submit" value="Save details">
    </form>
 </body>
</html>

This is the PHP I’ve now changed to the comments should be fairly self explanitary, and at least it saves the XML file to the right place, even if it’s
not filling it in.

<?php

 $xmlfile = "wrmvlplayer.xml";

 $file = fopen($xmlfile,"w");

 fwrite($file, "<videolist>"."\
");

	 fwrite($file, "<video>"."\
");
//This is the first form input field, videos/ is the video file directory	
 		fwrite($file, "<file>videos/</file>"."\
"); //The form input field needs to insert the file name after videos/ (remaining blank ATM)
 		fwrite($file, "<image>videos/websitetitled.jpg</image>"."\
"); //This should be good and doesn't need to change
 		fwrite($file, "<title></title>"."\
"); //The form input field needs to insert the same file name between the two <title></title> tags
 		fwrite($file, "<description></description>"."\
"); //The form input field needs to insert the same file name between the two <description></description> tags
		
 	fwrite($file, "</video>"."\
");
// This is the second form input field, and is similar to the first form input with the exception of having a different file name
 	fwrite($file, "<video>"."\
");
	
 		fwrite($file, "<file1>videos/</file1>"."\
");
 		fwrite($file, "<image>videos/websitetitled.jpg</image>"."\
");
 		fwrite($file, "<title></title>"."\
");
		fwrite($file, "<description></description>"."\
");
		
 	fwrite($file, "</video>"."\
");
// This is the third form input field, and is similar to the  above two but also having a different file name. This pattern needs to continue for as many videos as the user wishes to input
// with a MAX = 250
 	fwrite($file, "<video>"."\
");
	
 		fwrite($file, "<file2>videos/</file2>"."\
");
 		fwrite($file, "<image>videos/websitetitled.jpg</image>"."\
");
 		fwrite($file, "<title></title>"."\
");
 		fwrite($file, "<description></description>"."\
");
		
 	fwrite($file, "</video>"."\
");

 fwrite($file, "</videolist>"."\
");

 fclose($file);

?>

And this is the saved XML file, though it doesn’t show the XML version or encodings as well as no fomating, big deal! It’s an improvement.

<videolist>
<video>
<file>videos/</file>
<image>videos/websitetitled.jpg</image>
<title></title>
<description></description>
</video>
<video>
<file1>videos/</file1>
<image>videos/websitetitled.jpg</image>
<title></title>
<description></description>
</video>
<video>
<file2>videos/</file2>
<image>videos/websitetitled.jpg</image>
<title></title>
<description></description>
</video>
</videolist>

So a little progress has been made thus far

A week gone by already? I got mired in end of the month stuff (bill paying etc.) but didn’t realize, sorry.

I took a look and tried your original stuff - seemed ok for what was there - just a lot missing :frowning:

I’ll update my test files with your new stuff and do a deeper analysis as soon as I get back from grocery shopping - promise.

You have made some progress I see. As for the formatting of the XML file, you have the newlines, you can do similar for tabs.

The form’s method is POST, and will populate the global $_POST array when it’s submitted. To let you see what the form is submitting, I added a var_dump to the PHP file’s code. This will help you decide what’s what and how and where to use it.

As the form allows for unlimited inputs (IMHO I think you should put a limit) you can’t tell how many nodes will need to be added to the XML file. A nice thing about arrays is you can use a foreach to go though them 1 member at a time.

Your code has a series of fwrites. This works, but I prefer to synthesize the string and do a single fwrite as seen in my code. The choice is your’s of course. I guess the difference boils down to how big an XML string you might have. If it gets real big memory might be an issue and writing in smaller chunks might be better. Maybe not much difference either way ??? So feel free to change it back to fwrites if you prefer.

*The code still has issues that can be dealt with by adding conditional checks. I’ll leave that for you to experiment with for now.

<?php
/* for development only */
var_dump($_POST);

$xmlfile = "wrmvlplayer.xml";
/* image node is always the same? */ 
$imgstring = "\	\	<image>videos/websitetitled.jpg</image>\
";
 
// write declaration
$xmlstring = "<?xml version=\\"1.0\\" encoding=\\"utf-8\\" ?>\
";
// beginning root node
$xmlstring .= "<videolist>\
";
// write sub nodes
foreach ($_POST as $key => $value)
{
	$xmlstring .= "\	<video>\
";
	$xmlstring .= "\	\	<file>videos/" . $key . "</file>\
";
	$xmlstring .= $imgstring;
	$xmlstring .= "\	\	<title>" . $value . "</title>\
";
	$xmlstring .= "\	\	<description>" . $value . "</description>\
";
	$xmlstring .= "\	</video>\
";
}
// end root node
$xmlstring .= "</videolist>\
";
 
$file = fopen($xmlfile,"w");
fwrite($file, $xmlstring);
fclose($file);
?>

Thanx Mittineague, another thing I’ve just thought about also, is that the video player is written in javascript and has a flash player as a fallback, if a fieldCount can be used for the form input (as above), why can’t a fileCount be used in the player, so it recognises multiple xml files, such as, e.g. wrmvlplayer().xml, wrmvlplayer(1).xml, wrmvlplayer(2).xml, etc. Anyway, first things first, lets just get it to input the actual form data to the xml file, so I can check to see if it plays, as there may be other things I need the user to input, such as hyphens, apostrophes, parenthesis etc. Cheers mate.
Back already that was quick I’ll copy the code and get to work, I’ll get back to you soon. cheers again mate

Awesome stuff, but still a couple of things, I’ve uploaded a screenshot of the new tab in IE9 so you can see the results it produces and wrmvlplayer.xml file code is under that.

New tab in IE9

<?xml version="1.0" encoding="utf-8" ?>
<videolist>
	<video>
		<file>videos/file</file> //file here instead of actual file name
		<image>videos/websitetitled.jpg</image> //This is good
		<title>2 Brothers On The 4th Floor - Fly .mp4</title> //This is good
		<description>2 Brothers On The 4th Floor - Fly .mp4</description> //This is good
	</video>
	<video>
		<file>videos/file1</file> //file1 here instead of actual file name
		<image>videos/websitetitled.jpg</image> //This is good
		<title>2 Pac - Changes .mp4</title> //This is good
		<description>2 Pac - Changes .mp4</description> //This is good
	</video>
	<video>
		<file>videos/file2</file> //file2 here instead of actual file name
		<image>videos/websitetitled.jpg</image> //This is good
		<title>2 Unlimited No Limit .mp4</title> //This is good
		<description>2 Unlimited No Limit .mp4</description> //This is good
	</video>
</videolist>

I have to refresh the player page to get the player to load again, but thats ok, as it loads fine, obviously it just doesn’t play. Cheers mate

I’ve fixed the $xmlstring .= “\ \ <file>videos/” . $key . "</file>
" to $xmlstring .= “\ \ <file>videos/” . $value . "</file>
"; that now makes wrmvlplayer.xml file all good, but alas, the player still doesn’t play. So I’ve uploaded a couple more screenshots, the first one is the wrmvlplayer after a page refresh and the playlist enabled, the 2nd one is after I click on the play button

After page refresh and playlist enabled

After clicking on the play button
I might try restarting dreamweaver and wampserver so everything is refreshed, without creating another xml file. Cheers

I think it might be a path thing. If you change <file> to absolute URLs (starting with “http://”) do they play?

WOOHOO! No it wasn’t a path thing, it was the file extension, turns out one of the mp4 video convertors I use puts a .mp4video.mp4 extension on the files it converts, once I removed that, BINGO! Nice work Mittineague I thank you very much. I just loaded ten videos and played them, I’m over the moon about it (ha ha ha). Now, to stop the page opening a new tab in IE9, I know I have it set to target=_new, in the form, as shown above, but if I don’t, it closes the player page and loads in its place, any ideas? I have a couple of preloader.gifs to try out so the users know theres something happening. Unsure how these work, but will play with them next. I still have to refresh the player page to load the player and the newly created playlist, so I thought I would explain to the users to click refresh after the preloader finishes. Cheers Mittineague, your awesome, dude!

As the form allows for unlimited inputs (IMHO I think you should put a limit) you can’t tell how many nodes will need to be added to the XML file. A nice thing about arrays is you can use a foreach to go though them 1 member at a time.
Hi Mittineaque, Could you clarify this a bit more for me, please. I have a max limit of 250 in the form, unsure if I have it right though. If a member creates a playlist of say 20 videos and starts playing them, then a second member creates a playlist 2 minutes later, what happens to the first members playlist, it will be overwritten, wouldn’t it ? or become corrupted. So I’ve been doing some reading to try and find a work around by appending the second members playlist at the end of the first members playlist. This is what I’ve come up with.

<?php
/* for development only */
//var_dump($_POST);

$xmlfile = "wrmvlplayer.xml";
/* image node is always the same? */ 
$imgstring = "\	\	<image>videos/websitetitled.jpg</image>\
";
 
// write declaration
$xmlstring = "<?xml version=\\"1.0\\" encoding=\\"utf-8\\" ?>\
";
// beginning root node
$xmlstring .= "<videolist>\
";
// write sub nodes
foreach ($_POST as $key => $value)
{
    $xmlstring .= "\	<video>\
";
    $xmlstring .= "\	\	<file>videos/" . $value . "</file>\
"; 
    $xmlstring .= $imgstring;
    $xmlstring .= "\	\	<title>" . $value . "</title>\
";
    $xmlstring .= "\	\	<description>" . $value . "</description>\
";
    $xmlstring .= "\	</video>\
";
}
// end root node
$xmlstring .= "</videolist>\
";
 
$file = fopen($xmlfile,"a","w");
fgets($file);
fseek($file, 5, SEEK_END);
if (flock($file, LOCK_EX))
{
fwrite($file, $xmlstring);
    flock($file, LOCK_UN);
}
fclose($file);

echo "<h1>";
echo "Your Playlist has been successfully created. Please close this tab and refresh the Video Player page.";
echo "</h1>";
?>

I pretty much just added fgets, fseek and flock to your original code. The resulting xml file looks like this.

<?xml version="1.0" encoding="utf-8" ?>
<videolist>
	<video>
		<file>videos/2 Brothers On The 4th Floor - Fly.mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>2 Brothers On The 4th Floor - Fly.mp4</title>
		<description>2 Brothers On The 4th Floor - Fly.mp4</description>
	</video>
	<video>
		<file>videos/2 Pac - Dear Mama.mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>2 Pac - Dear Mama.mp4</title>
		<description>2 Pac - Dear Mama.mp4</description>
	</video>
	<video>
		<file>videos/2 Unlimited - No Limit.mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>2 Unlimited - No Limit.mp4</title>
		<description>2 Unlimited - No Limit.mp4</description>
	</video>
</videolist>
<?xml version="1.0" encoding="utf-8" ?>
<videolist>
	<video>
		<file>videos/7 Year ***** - Lorna.mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>7 Year ***** - Lorna.mp4</title>
		<description>7 Year ***** - Lorna.mp4</description>
	</video>
	<video>
		<file>videos/10 cc - Donna (1972).mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>10 cc - Donna (1972).mp4</title>
		<description>10 cc - Donna (1972).mp4</description>
	</video>
	<video>
		<file>videos/12 Stones - Broken.mp4</file>
		<image>videos/websitetitled.jpg</image>
		<title>12 Stones - Broken.mp4</title>
		<description>12 Stones - Broken.mp4</description>
	</video>
</videolist>

This is sort of the result I was expecting, but the video player doesn’t seem to recognise the xml file, I thought it might have been the second xml version encoding line, so I removed it, but still no good. This is why I’m asking for a better clarification on the “foreach” function and how to implement it for every member that wants to create a playlist.
One other thing I’m curious about is the directory videos will have 27 sub directories, so is there a way to to tell it to search the sub directories as well. Any help as always is greatly appreciated. Cheers.

Sorry about the confusion, I missed the 250 limit before. If that seems like a reasonable limit it should be OK.

Do you want users to share playlists? If so you’ll need to strip of the closing </videolist> tag, append without the declaration and opening root tag, and then close it (or maybe get into some of the XML DOM functions). Otherwise you could give a unique name (their name?) for each user’s file.

Ideally, one xml file per user would be perfect, but the video player will only recognise one xml file name. Thats why I wrote this in an earlier post “if a fieldCount can be used for the form input (as above), why can’t a fileCount be used in the player, so it recognises multiple xml files, such as, e.g. wrmvlplayer().xml, wrmvlplayer(1).xml, wrmvlplayer(2).xml, etc” The player is written with javascript and has a flash player for fallback, and I’m definetly a martian when it comes to javascript, I could post all of the players javascript code, if thats any help, I think theres 2 or 3 files, If shown what to edit and how to edit it I’m sure I could do it. But what about the flash player how would that be affected andwould it need to be edited also. Cheers mate

I’ve looked at the javascript files. As much difficulty as I have trying to read minified jquery, I’m still fairly certain that what needs to be changed isn’t that, but the magichtmlipadvideo.js file.

Unfortunately, that too is minified, and obfuscated as well. Sorry, but I don’t have the time to reverse engineer it and there’s a more than likely chance the author doesn’t want it reverse engineered.

Can you contact the author (maybe he has a support forum/wiki?) and ask him?

Thanx Mittineague, both for your time and effort, it is greatly appreciated, more than you’ll ever know. When I eventually get this site up and running, you are invited to join and I will give you admin priveleges in its forum.
Yes I can contact the author, but they only informed me of there new player and 1. I don’t like the style of it and 2. it cannot read the xml file at all. They have also changed all the tag names and the xml file name, not that, that is a big deal. I will contact them again, though, as I am planning to get a licence for 5 of their players.
Just one other quick thing, I uploaded your code to the server and updated all the files as necessary for the player, but it won’t create the xml file and the player page wants to resend the information, when I click on refresh, I tried the chmod command to make sure the directory has the right permissions set, whether I got it right or not, I’m unsure, and I was wondering if I possibly need to put a httprequet in there somewhere, any ideas on that? Once again thankyou very, very much.