DVD Flow (a HTML movie player with VLC)
Posted: 26 Apr 2008 13:00
Hey Guys
This is my first post so i thought id show you a little HTML fun i've been having with VLC
Around the house we have alot of laptops/PC's connected to things from plasma's to Projectors
To make it easier for my dad and anyone in general to select movies i created this lil HTML Application.
What this application does is lets u select a Movie (using dvd covers) and lets you watch it in the browser with VLC.
It's a simple but nice looking setup i think so i edited my original setup to be more easily editable for everyone here.
So i called this DVD Flow as this is based off the Apple Itunes Coverflow.
I found a great Opensource Flash version of Coverflow from Nathan99 from his website http://www.n99creations.com/vieweg.php?id=14
I modified this flash file to work for my purposes.
I also used most parts of DamienF's HTML VLC Plugin http://people.videolan.org/~damienf/plugin-0.8.6.html
This lets you scroll through a huge load of DVD covers and play the movie through VLC all through HTML this doesn't need to be hosted i just run this off my main PC from a Network share
Here are a few pics to give u an idea on what it looks like:
http://www.filefactory.com/file/66d363
I hope this is useful to someone i created a xml file to start you guys off to test it out just change the filename to a avi file on your pc to check it out.
Also you will have to allow the flash movie to communicate with the javascript (should popup when u first run) it's a security settings when local files are accessing. If it doesn't show up i believe this is the right address to add your local harddrive to the allow list http://www.macromedia.com/support/docum ... ger03.html
P.s I've only used this in Firefox I haven't tried IE
-------------------------------------------------------
How to Edit HTML:
I setup this to be easily editable for anyone you don't need any HTML knowledge at all really. This will let you create different HTML files for different things like movies starting with A to category to Year etc.
If you wanted to make DVD Flow to load up different XML files (for say sorting movies by Alpha) you only need to change 3 things
Open DVD Flow.htm
Search for <param name="FlashVars" value="XMLlist=Movies_A.xml">
Once found all you need to do is rename that to the New XML file E.g. <param name="FlashVars" value="XMLlist=Movies_B.xml">
Now search for FlashVars="XMLlist=Movies_A.xml"
Same thing change it to a new XML File E.g. FlashVars="XMLlist=Movies_B.xml"
Now Save the HTML file as something else E.g. Movies_B.html
Once saved search for <input type="hidden" value="DVD Flow.htm" name="file" size="20"> and change it to the new HTML filename e.g. <input type="hidden" value="Movies_B.html" name="file" size="20">
Now the reason the name of the HTML file is in a form is so once your watched the movie you can go back to the exact page you left.
How to Edit XML:
The XML is pretty straight forward you have a <artworkinfo> right at the star of the file and a </artworkinfo> at the end of the file
In between you have this below
<movieinfo>
<artLocation>Adventures In Babysitting.jpg</artLocation>
<moviename>Adventures in Babysitting</moviename>
<year>1987</year>
<moviedesc>Playboy releases its March issue, containing a nude pictorial of the Playmate of the Month, who bears an uncanny resemblance to Hemingway High School senior, Chris Parker.</moviedesc>
<httptype>./artwork/</httptype>
<linkTo>H:\Movies\Adventures in Babysitting\AB1987.avi</linkTo>
<linkTarget></linkTarget>
</movieinfo>
Now its pretty simple when you look at it the first thing is the name of the JPEG File
Second is the Movie Name
Third is Year
Forth is the summary of the Movie so you have an idea of what its about
Fifth is where the DVD image file (The JPEG File) is stored
sixth is the link to the Movie file (can be anything that VLC can play)
seventh isn't used
It's pretty simple to create new entries into XML File
This is my first post so i thought id show you a little HTML fun i've been having with VLC
Around the house we have alot of laptops/PC's connected to things from plasma's to Projectors
To make it easier for my dad and anyone in general to select movies i created this lil HTML Application.
What this application does is lets u select a Movie (using dvd covers) and lets you watch it in the browser with VLC.
It's a simple but nice looking setup i think so i edited my original setup to be more easily editable for everyone here.
So i called this DVD Flow as this is based off the Apple Itunes Coverflow.
I found a great Opensource Flash version of Coverflow from Nathan99 from his website http://www.n99creations.com/vieweg.php?id=14
I modified this flash file to work for my purposes.
I also used most parts of DamienF's HTML VLC Plugin http://people.videolan.org/~damienf/plugin-0.8.6.html
This lets you scroll through a huge load of DVD covers and play the movie through VLC all through HTML this doesn't need to be hosted i just run this off my main PC from a Network share
Here are a few pics to give u an idea on what it looks like:
http://www.filefactory.com/file/66d363
I hope this is useful to someone i created a xml file to start you guys off to test it out just change the filename to a avi file on your pc to check it out.
Also you will have to allow the flash movie to communicate with the javascript (should popup when u first run) it's a security settings when local files are accessing. If it doesn't show up i believe this is the right address to add your local harddrive to the allow list http://www.macromedia.com/support/docum ... ger03.html
P.s I've only used this in Firefox I haven't tried IE
-------------------------------------------------------
How to Edit HTML:
I setup this to be easily editable for anyone you don't need any HTML knowledge at all really. This will let you create different HTML files for different things like movies starting with A to category to Year etc.
If you wanted to make DVD Flow to load up different XML files (for say sorting movies by Alpha) you only need to change 3 things
Open DVD Flow.htm
Search for <param name="FlashVars" value="XMLlist=Movies_A.xml">
Once found all you need to do is rename that to the New XML file E.g. <param name="FlashVars" value="XMLlist=Movies_B.xml">
Now search for FlashVars="XMLlist=Movies_A.xml"
Same thing change it to a new XML File E.g. FlashVars="XMLlist=Movies_B.xml"
Now Save the HTML file as something else E.g. Movies_B.html
Once saved search for <input type="hidden" value="DVD Flow.htm" name="file" size="20"> and change it to the new HTML filename e.g. <input type="hidden" value="Movies_B.html" name="file" size="20">
Now the reason the name of the HTML file is in a form is so once your watched the movie you can go back to the exact page you left.
How to Edit XML:
The XML is pretty straight forward you have a <artworkinfo> right at the star of the file and a </artworkinfo> at the end of the file
In between you have this below
<movieinfo>
<artLocation>Adventures In Babysitting.jpg</artLocation>
<moviename>Adventures in Babysitting</moviename>
<year>1987</year>
<moviedesc>Playboy releases its March issue, containing a nude pictorial of the Playmate of the Month, who bears an uncanny resemblance to Hemingway High School senior, Chris Parker.</moviedesc>
<httptype>./artwork/</httptype>
<linkTo>H:\Movies\Adventures in Babysitting\AB1987.avi</linkTo>
<linkTarget></linkTarget>
</movieinfo>
Now its pretty simple when you look at it the first thing is the name of the JPEG File
Second is the Movie Name
Third is Year
Forth is the summary of the Movie so you have an idea of what its about
Fifth is where the DVD image file (The JPEG File) is stored
sixth is the link to the Movie file (can be anything that VLC can play)
seventh isn't used
It's pretty simple to create new entries into XML File