DVD Flow (a HTML movie player with VLC)

[NiN^_^NiN]

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

[NiN^_^NiN]

I just uploaded a test of it to a free webhost so you guys can test it out right now it's just linking to trailers of the movies

http://nin-nin.runhost.net/

[Jean-Baptiste Kempf]

This is very very good.

[NiN^_^NiN]

Thanks Jean

[alf3299]

Hi guys this is excelent work and iwould like to use it someone has the .fla source file of the "DVD Flow.swf"
I would like to translate into another language and make some adaptions .

Any help is much appreciated
And thanks for this excelent work and for your time and dedication
Regards
aeli

[fabian123]

That's an awesome frontend!

I try to get it running on my linux server (ubuntu, "vlc -I http"), where I run into some problems:

1. Flash is only starting if I remove ALL spaces in all files (and inside the htm-file of course).
2. The only error message I receive if anything goes wrong is "No suitable access module for...", no matter if not found or what ever. What data types does dvdflow/flash support? Do I have to transcode on the fly?
3. If it is working short movies work fine. But a large movies load almost forever - does dvdflow load the hole movie before streaming?! That doesn't make sense, does it? (It's the same on my local box.)
4. I saw at n99creations, that they have two list buttons - is that here possible too?

Thanks for your help!

fabian

[NiN^_^NiN]

Hey guys

To answer some questions:

I didn't add the FLA file for the flash as this was ment to be easy setup for anyone without experience but i have attached it to this post if you wanna mess around with it the only change i did from mine and N99's sample is i removed the list 1 and 2 buttons and used a variable for what XML file to load first (set within the html)

Flash Source Code
http://www.filefactory.com/file/94a2b7

Im sorry i don't have linux/used it much to help you with your questions but i might be able to help

I try to get it running on my linux server (ubuntu, "vlc -I http"), where I run into some problems:

1. Flash is only starting if I remove ALL spaces in all files (and inside the htm-file of course).
What do you mean by all spaces? as in the XML file and HTML file? i don't see why it would need this unless the XML file is setup wrong I have spaces in my jpeg and xml files (did u try the sample i attached to test?)

2. The only error message I receive if anything goes wrong is "No suitable access module for...", no matter if not found or what ever. What data types does dvdflow/flash support? Do I have to transcode on the fly?

Never seen that message the flash just reads Jpeg and gif files (not sure bout gif don't use it but i believe it does) for the images and reads the data through a XML file there isn't anything else thats being done.

I do think i might know what the problem is tho i couldn't get my javascript to work on my laptop with it but what i found out is that flash when installed doesn't allow local flash files to communicate with anything outside of flash (aka javascript) i had to set the directory i had all the files to allow communications i posted the steps in the first post

Cause your limux im guessing this might be the problem as i don't know how flash is installed on linux but try the global settings at http://www.macromedia.com/support/docum ... ger03.html in linux and see if it lets u set flash to allow communication on the local harddrive

3. If it is working short movies work fine. But a large movies load almost forever - does dvdflow load the hole movie before streaming?! That doesn't make sense, does it? (It's the same on my local box.)

It works straight away maybe takes 1 second for the javascript to tel VLC the MRL and display the movie name thats it i'm guessing it might be a problem with your vlc setup perhaps?

4. I saw at n99creations, that they have two list buttons - is that here possible too?
It sure is all the did was point to a XML file and then loaded it into flash i removed these for 2 reasons

1) I couldn't get a 3rd button to be infront of the dvd covers (just me not knowing how the other 2 buttons are set really)
2) Cause i wanted it to all work through HTML hence why im having a HTML page that lets you select from A B C and COMEDY ACTION etc which then loads the xml file into the flash needing no changes to flash if i add another category or add more options.

I do have 1 question tho you said ubuntu, "vlc -I http" are you setting VLC's http interface to on and using the dvd flow files through the html server? if so that would be why the movie takes ages to load i would think im running the html file directly from the harddrive im not even loading up VLC im letting the webbrowser call it once the movie has been selected which doesn't create lag like it would with the VLC http server

I hope this helps you in some way

[alf3299]

NiN^_^NiN

Thanks for the source fla.

I have a another question.

When we select a movie we then click watch movie and we see the movie so far so good. But i was wondering if i want to stream a movie with more parts for example 3 or 4 and had the links for those parts into the xml are they going to be added to the vlc MRL playlist ? If not Do u have any idea how i could add more parts to a streaming movie without having to code new button like watch movie_part_1, watch movie_part_2, watch movie_part_3 and had them automaticly into a playlist?

Regards,
Aeli

[coldfire73]

Hi there,
Firstly... superb front-end! Thanks!

I have a minor issue with it, in that i can play most things that VLC supports, except it seems to crash both Firefox and IE when using RTSP.

For example, the XML I'm using is:

<linkTo>rtsp://localhost:5554/Channel2</linkTo>

In DamienF's HTML VLC Plugin (http://people.videolan.org/~damienf/plugin-0.8.6.html) entering that RTSP link seems to work fine for me.

Any suggestions would be appreciated.

Thanks

[alf3299]

Hi cold fire

I would suggest u to copy the source code from the player from http://nin-nin.runhost.net/

Put in your browser http://nin-nin.runhost.net/ then click watch a movie then u got to a page with the player copy the source code from this page with the player then use this code instead of the code u are using and it should work

Hope this help

Aeli

[coldfire73]

Great! That worked fine for me! Thanks for the speedy response!

[coldfire73]

Just another question....

I've been attemting to tweak the MoviePlay.html so that the movie will initially play in fullscreen mode, dropping back to the windowed view when the mode is toggled (i know there is a button on the page to toggle the mode, but I'd prefer the movie to start fullscreen so i don't have to keep clicking it) . However, I don't seem to be having any luck.

I've tried altering the "function doGo(targetURL)" and inserting the following after the call to "vlc.playlist.playItem(itemId);" :

vlc.video.fullscreen=1;

..or even:

vlc.video.toggleFullscreen();

I've even tried doing this before the call to vlc.playlist.playItem(itemId);" but that seems to result in the video never being played at all.

I'm kinda new to HTML, so I'm really just tweaking and am probably doing something really stupid, so any advice you can give me would be appreciated.

BTW, I've been using this on both Firefox and IE7 without any other issues

Thanks

[coldfire73]

Sorted that too now. It required a delay after calling PlayItem() (which returns immediately) before calling vlc.video.fullscreen = true;

Code: Select all

function forceFullscreen(arValue) { var vlc = getVLC("vlc"); if( (vlc.input.state == 2 || vlc.input.state == 3) && vlc.input.hasVout ) { vlc.video.fullscreen = true; } }; // partial extract from doGo // play MRL vlc.playlist.playItem(itemId); // Initially force the display to be fullscreen // As playItem() returns immediately, we need to delay // going fullscreen until it's playing. The timeout // is dependant on the hardware. setTimeout("forceFullscreen()", 2000);

[fabian123]

@ nin_nin,
thanks for your reply, it helped

Here some things I worked out for running it on a linux machine (mine is ubuntu hardy (server without GUI)):

1. Installation:
- Just put the DVDFlow-folder into the your normal http-server-webroot (i.e. /var/www for apache).
Don't put the stuff into the vlc-http folder or it will load the hole movie before starting to stream (bad idea
with a 90min movie...).
- enjoy the demo: http://<server>/DVDFlow/DVD Flow.htm

2. Configuration:
- Link your movie and image paths into the DVDFlow-folder (see below)
- Adjust your xml-config file.

3. Pitfalls:
- DVDFlow seems to have trouble with spaces in the paths and filenames to the movies and the movie-images. And
they have to be inside the DVDFlow-Folder (linking files or folders with 'ln -s' does work).
** If it doesn't find a movie, the somewhat misleading error message is:
"No suitable access module for <http-path from movie in the xml-file>" (!) **
Examples for storage paths:
/home/fabian/Filme/Super Movie.avi (won't work)
/home/fabian/Filme/Super_Movie.avi (won't work)
/var/www/DVDFlow/Filme/Super Movie.avi (won't work, either linked or moved from /home/fabian/)
/var/www/DVDFlow/Filme/Super_Movie.avi (should work, either linked or moved from /home/fabian/)

- In the xml-file don't put an "." infront of the movies path (like it is with ./artwork). It won't work.
Examples:
if the movie path is:
/var/www/DVDFlow/Filme/Super_Movie.avi
and the xml-file path is:
/var/www/DVDFlow/XML/Movies.xml
the xml-file entry is:
./Filme/Super Movie.avi (won't work)
./Filme/Super_Movie.avi (won't work)
Filme/Super_Movie.avi (should work)

Greets,
fabian

[NiN^_^NiN]

@ nin_nin,
thanks for your reply, it helped

Here some things I worked out for running it on a linux machine (mine is ubuntu hardy (server without GUI)):

1. Installation:
- Just put the DVDFlow-folder into the your normal http-server-webroot (i.e. /var/www for apache).
Don't put the stuff into the vlc-http folder or it will load the hole movie before starting to stream (bad idea
with a 90min movie...).
- enjoy the demo: http://<server>/DVDFlow/DVD Flow.htm

2. Configuration:
- Link your movie and image paths into the DVDFlow-folder (see below)
- Adjust your xml-config file.

3. Pitfalls:
- DVDFlow seems to have trouble with spaces in the paths and filenames to the movies and the movie-images. And
they have to be inside the DVDFlow-Folder (linking files or folders with 'ln -s' does work).
** If it doesn't find a movie, the somewhat misleading error message is:
"No suitable access module for <http-path from movie in the xml-file>" (!) **
Examples for storage paths:
/home/fabian/Filme/Super Movie.avi (won't work)
/home/fabian/Filme/Super_Movie.avi (won't work)
/var/www/DVDFlow/Filme/Super Movie.avi (won't work, either linked or moved from /home/fabian/)
/var/www/DVDFlow/Filme/Super_Movie.avi (should work, either linked or moved from /home/fabian/)

- In the xml-file don't put an "." infront of the movies path (like it is with ./artwork). It won't work.
Examples:
if the movie path is:
/var/www/DVDFlow/Filme/Super_Movie.avi
and the xml-file path is:
/var/www/DVDFlow/XML/Movies.xml
the xml-file entry is:
./Filme/Super Movie.avi (won't work)
./Filme/Super_Movie.avi (won't work)
Filme/Super_Movie.avi (should work)

Greets,
fabian

Hey Fabian Glad to see your got it somewhat working under Linux it is interesting that it works differently and doesn't allow linking to diff dir's and filenames with spaces when that works fine under windows.

Hopefully this will help any linux user who wanna try it thanks sorry i can't help you with it much.

Also sorry everyone i wasn't around for a while

NiN^_^NiN

Thanks for the source fla.

I have a another question.

When we select a movie we then click watch movie and we see the movie so far so good. But i was wondering if i want to stream a movie with more parts for example 3 or 4 and had the links for those parts into the xml are they going to be added to the vlc MRL playlist ? If not Do u have any idea how i could add more parts to a streaming movie without having to code new button like watch movie_part_1, watch movie_part_2, watch movie_part_3 and had them automaticly into a playlist?

Regards,
Aeli

Hmm i never thought of using multiple files (altho i am gonna be working on it for TV Shows when i continue with this tho)

To do this you need to edit the flash file to add a few more text boxes and add a few more lines in the xml for it then add in the javascript to get the variables then add them to the playlist

I'll try to see if i can do a multi file selection for you later on ok

Sorted that too now. It required a delay after calling PlayItem() (which returns immediately) before calling vlc.video.fullscreen = true;

Code: Select all

function forceFullscreen(arValue) { var vlc = getVLC("vlc"); if( (vlc.input.state == 2 || vlc.input.state == 3) && vlc.input.hasVout ) { vlc.video.fullscreen = true; } }; // partial extract from doGo // play MRL vlc.playlist.playItem(itemId); // Initially force the display to be fullscreen // As playItem() returns immediately, we need to delay // going fullscreen until it's playing. The timeout // is dependant on the hardware. setTimeout("forceFullscreen()", 2000);

Glad to see you worked it out coldplay nice job

[alf3299]

Thnks mate i am also going to try to solve the problem

cheers

[alf3299]

NiN^_^NiN

could u give me some guidance to try to solve this problem.

not sure how to do it i dont have programming experience.

Any help is much appreciated.

alf eli

[michael1t]

Help I can NOT get down the source to the swf ... file I need to edit the swf ...
Can Someone post it on the forum so I can get it downloaded..

I tried to get it from the other post with no luck I must be doing something wrong ...

This is great code thanks all..

Michael T.

[NiN^_^NiN]

Sorry i haven't been back just got a msg telling me the link was dead so i've reuploaded the file here's the link
http://www.filefactory.com/file/951991/ ... D_Flow_zip

Sorry to alf3299 too i didn't see you wanted help if you are still here whats the problem you have?

[Meingot]

Hello

It's seems to be a very nicejob.
Unfortunatly the link your file is broken.
Could you reupload please

Thanks in advance

ps: sorry for my bad English

[maverick86]

Hi
Can anyone upload the DVDFlow file again

[mrhow]

I'd like to get the DVD Flow file too if someone can upload it please.

[NiN^_^NiN]

I'll have to setup a website soon and put a link on that so its not gonna expire every 30 days

I'm working on a better interface and a modified one of this aswell where everything is in the one page and im gonna soon try a basic version for on a pocket pc and use that as a remote

[Jimmy_Neuron]

Hello,
This looks very promising! Is there any update on this interface? Or any possibility to get the old version? Thanks!

[dinki]

Can someone post this or email the file to me?