rejetto forum
Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: SilentPliz on August 27, 2009, 04:10:02 PM
-
La version de ce "post" en français, ainsi que le "pack fr" qui l'acconpagne, se trouvent ici:
http://www.rejetto.com/forum/index.php?topic=7317.0
Small contribution of Summer by Mars and myself.
Preamble:
And if we put a small mp3 jukebox, and a video player on the Webpages of our favorite HTTP File Server
(recent beta version 2.3).
All playlists are semi-dynamic.
The flash players used are:
JW FLV Media Player 4.5 for video files (FLV, MP4, and some h264 format).
This player also accepts audio formats that we will not use here.
http://www.longtailvideo.com/players/jw-flv-player/
Flash XSPF Jukebox for sound files (MP3):
http://blog.lacymorrow.com/projects/xspf-jukebox/
I enclose to the end of this post, a package containing these 2 players, ready to be installed
but it may be useful to consult these sites to load other skins, plugins, or know the variables
used for other settings.
The peculiarity of these readers is to accept the playlist format XSPF (XML), which we will be very useful here.
This is a free format, so it's even better!
http://xspf.org/
------------------------------------------------------------------------------------
Playlists Generator sources:
http://emff.sourceforge.net/playlistgenerator/
------------------------------------------------------------------------------------
Now, enter the heart of the matter ;):
To install the multimedia package:
1)
- Unpack the file multimediaeng.zip in the folder of hfs.exe
You end up with a folder named "multimediaeng" containing 6 folders and 2 files:
enteteplayer.xml
hfs.events
You move these two files so they can be found in the root folder of hfs.exe
2)
In HFS, you right-click on the root of VFS (home):
- Add folder from disk > add the multimediaeng folder
You apply, and validate.
3)
- You right-click on multimediaeng folder
properties... > Flags > Check on Hide and on Don't Log
Allow access to users of your choice
You apply, and validate.
4)
You right-click on the root of VFS (home):
properties... > File masks > in the Files filter field, you add:
;playlist*.*
Default values displays a line like this:
\index.htm*;default.htm*;playlist*.*
You apply, and validate.
5)
Menu > Other Options > MIME Types
You add a new row where you write as File Mask: *xspf and as MIME Description: application/xspf+xml
You apply, and validate.
6)
You load a template content in this folder: multimediaeng\6 templates-3 anglais-3 français_generator_inclus
(The templates names ending with eng, are ... in English language)
You save your options and your *.VFS in a file.
Additional skins are available ... see the sites mentioned above
------------------------------------------------------------------------------------
Using playlists for Users:
I have forbidden the players access to anonymous users.
So, log on a user account, try to upload some files *.mp3 or *.FLV or *.mp4 in a folder that has permissions Access, Upload, Delete.
You can of course create other folders if you want to make a playlist by album per eg.
Use the icons at the top page, for listening and viewing.
About thumbnails:
- Convention for the images names in a folder where you place sound files:
One thumbnail per folder / album, named:
folder.jpg
(folder.jpg is a real name, do not give the name of your folder for the thumbnail file)
- Convention for the images names in a folder where you place vidéo files:
Several thumbnails are allowed per folder, named:
the_name_of_your_video_file.jpg
------------------------------------------------------------------------------------
Using two (2) Overall playlists:
You can use two overall playlists (audio and video), playable in a separate window or a tab in your browser.
In a folder where you have created a playlist (preferably long ;)), you copy the following files which you'll find:
playlistaudio.xml
playlistaudio.xspf
and/or
playlistvideo.xml
playlistvideo.xspf
These files must be copied in:
folder_of_hfs.exe\multimediaeng\playlistes\
(in the folder where is hfs.exe, remember ;))
You can also enable your users to update both of your playlists (audio and video).
Simply create 2 folders allowed to all users (of your choice), named for example:
audio_playlist_overall_update
video_playlist_overall_update
You will be filing the same files you have stored in the folder:
multimediaeng\playlistes\:
playlistaudio.xml and playlistaudio.xspf in the folder audio_playlist_overall_update
playlistvideo.xml and playlistvideo.xspf in the folder video_playlist_overall_update
It is important to tell your users that the files must be "uploaded" into "bulk" in these both folders.
Only the files of these folders, will update overall playlists.
Only users folders allow playlists multiple in separates folders.
Required: Then you add at hfs.events, at the end of the section [+upload completed]
(with the drive letters and paths that correspond to your setting, of course):
{.time|2|{.copy|E:\audio_playlist_overall_update\playlistaudio.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\audio_playlist_overall_update\playlistaudio.xspf|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xspf|C:\HFS\multimediaeng\playlistes\.}.}
Optional: You can hide the files contained in these folders, the folders contents will be invisible, even after an upload by an user.
Only "jukeboxes" will be availables to users and updated by their uploads!
To use this option, please right-click on each of these two folders:
Properties ... > File masks > and add in the Files filter field:
\*.mp3;*.aac;*flv;*mp4;*.jpg;*.h264
------------------------------------------------------------------------------------
INFO:
VLC can also generate playlists to XSPF format, but you will need corrected some details in paths with Notepad++ per example.
Update January 13, 2010 ( -> new JW FLV Media Player v5.0.753 included)
http://hfsupgradefrench.webhop.org/xspf/multimediaeng.zip
-
The templates provided with the pack are the ones I use with my French version of HFS.
It's possible that some options (no relation to the multimedia part) don't work with your version of HFS.
Here is the code used on these templates for the multimedia added, you can use it for your own templates.
The embedded code in the templates (only icons change according to the template used ...always the @$%[# transparency with IE !):
{.if |{.and|%user%|{.!=|%user%|anonymous.}.}|
<br />
<center>
{.if|{.filesize|%folder%playlistaudio.xml.}|{:
<a href="javascript:;" onmousedown="toggleDiv('list');"><IMG alt="" src="/multimediaeng/icones/iTUnes_32x32cl.png" title="{.!Audio playlist of.} %folder-name% - {.!Show / Hide MP3 Jukebox.}" alt="{.!Audio playlist of.} %folder-name% - {.!Show / Hide MP3 Jukebox.}" /></a>
{.repeat|1| .}
:}/if.}
<a target="_blank" href="/~audio"><IMG alt="" src="/multimediaeng/icones/Music-Note-32cl.png" title="{.!Main Audio Playlist.} - {.!Open the MP3 Jukebox in a new window.}" alt="{.!Main Audio Playlist.} - {.!Open the MP3 Jukebox in a new window.}" /></a>
{.repeat|3| .}
{.if|{.filesize|%folder%playlistvideo.xml.}|{:
<a href="javascript:;" onmousedown="toggleDiv('video');"><IMG alt="" src="/multimediaeng/icones/My Computer_32x32cl.png" title="{.!Video playlist of.} %folder-name% - {.!Show / Hide Video Player.}" alt="{.!Video playlist of.} %folder-name% - {.!Show / Hide Video Player.}" /></a>
:}/if.}
{.repeat|1| .}
<a target="_blank" href="/~video"><IMG alt="" src="/multimediaeng/icones/Movies-48cl.png" title="{.!Main Video Playlist.} - {.!Open the Video Player in a new window.}" alt="{.!Main Video Playlist.} - {.!Open the Video Player in a new window.}" /></a>
{.repeat|3| .}
<a target="_blank" href="/multimediaeng/playlistgenerateur/playlistgeneratorcl.htm"><IMG alt="" src="/multimediaeng/icones/view_page_48cl.png" title="{.!XSPF List Generator.}" alt="{.!XSPF List Generator.}" /></a>
<script language="javascript">
function toggleDiv(list){
if(document.getElementById(list).style.display == 'none'){
document.getElementById(list).style.display = 'block';
}else{
document.getElementById(list).style.display = 'none';
}
}
</script>
<div id="list" style="display:none">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="fm_xspf_jukebox_2118358282"
class="flashmovie"
width="700"
height="400">
<param name="movie" value="/multimediaeng/xspf_jukebox/xspf_jukebox.swf" />
<param name="flashvars" value="skin_url=/multimediaeng/xspf_jukebox/skins/iTunes/&loadurl=/multimediaeng/xspf_jukebox/variables.txt&playlist_url=%folder%playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="/multimediaeng/xspf_jukebox/xspf_jukebox.swf"
name="fm_xspf_jukebox_2118358282"
width="700"
height="400">
<param name="flashvars" value="skin_url=/multimediaeng/xspf_jukebox/skins/iTunes/&loadurl=/multimediaeng/xspf_jukebox/variables.txt&playlist_url=%folder%playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br />
</div>
</center>
<script language="javascript">
function toggleDiv(video){
if(document.getElementById(video).style.display == 'none'){
document.getElementById(video).style.display = 'block';
}else{
document.getElementById(video).style.display = 'none';
}
}
</script>
<center>
<script type='text/javascript' src='/multimediaeng/player_video/swfobject.js'></script>
<div id='video' style="display:none"></div>
<script type='text/javascript'>
var s1 = new SWFObject('/multimediaeng/player_video/player.swf','ply','780','700','9','#');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=%folder%playlistvideo.xspf&dock=true&plugins=hd-1&hd.file=%folder%playlistvideo.xspf&playlist=bottom&image=%folder%%item-name%.jpg&skin=/multimediaeng/player_video/skins/snel/snel/snel.swf&bufferlength=6&volume=100&icons=false&backcolor=000000&frontcolor=FFFFFF&lightcolor=b30000');
s1.write('video');
</script>
</center>
/if.}
For "popups":
[audio]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/~style.css" type="text/css">
<!--[if lte IE 5.5]>
<style type="text/css">
</style>
<![endif]-->
<title>{.!Overall Audio Playlist.}</title>
</head>
<div id='body'>
<IMG alt="" src="/multimediaeng/icones/Music-Note-32cl.png">
<CENTER>
<hr color=555">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="fm_xspf_jukebox_2118358282"
class="flashmovie"
width="700"
height="400">
<param name="movie" value="/multimediaeng/xspf_jukebox/xspf_jukebox.swf" />
<param name="flashvars" value="skin_url=/multimediaeng/xspf_jukebox/skins/iTunes/&loadurl=/multimediaeng/xspf_jukebox/variables.txt&playlist_url=/multimediaeng/playlistes/playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash"
data="/multimediaeng/xspf_jukebox/xspf_jukebox.swf"
name="fm_xspf_jukebox_2118358282"
width="700"
height="400">
<param name="flashvars" value="skin_url=/multimediaeng/xspf_jukebox/skins/iTunes/&loadurl=/multimediaeng/xspf_jukebox/variables.txt&playlist_url=/multimediaeng/playlistes/playlistaudio.xspf" />
<param name="wmode" value="transparent" />
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<br />
</CENTER>
<hr color=555">
<br />
</div id='body'>
</html>
[video]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/~style.css" type="text/css">
<!--[if lte IE 5.5]>
<style type="text/css">
</style>
<![endif]-->
<title>{.!Overall Video Playlist.}</title>
</head>
<div id='body'>
<IMG alt="" src="/multimediaeng/icones/Movies-48cl.png">
<hr color=555">
<CENTER>
<div id='video'></div>
<script type='text/javascript' src='/multimediaeng/player_video/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('/multimediaeng/player_video/player.swf','ply','780','700','9','#');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addP[i][/i]aram('flashvars','file=/multimediaeng/playlistes/playlistvideo.xspf&plugins=hd-1&hd.file=/multimediaeng/playlistes/playlistvideo.xspf&playlist=bottom&skin=/multimediaeng/player_video/skins/snel/snel/snel.swf&bufferlength=6&volume=100&icons=false&backcolor=000000&frontcolor=FFFFFF&lightcolor=b30000');
s1.write('video');
</script>
</CENTER>
<hr color=555">
<br />
</div id='body'>
</html>
hfs.events (content):
[+upload completed]
{.if|{.and|{.filesize|enteteplayer.xml.}|{.match|mp3;aac;flv;mp4;h264|%item-ext%.}.}|
{:
{.switch|%item-ext%|;|mp3;aac|{:{.set|type|audio.}:}
|flv;mp4;h264|{:{.set|type|video.}:}
|.}
{.append|%folder%playlist{.^type.}.xml|
<track>
<location>{.convert|ansi|utf-8|{.replace|&|%26|=|%3D|?|%3F| |%20|%folder%%item-name%.}.}</location>
<title>{.convert|ansi|utf-8|{.substring||.%item-ext%|%item-name%.}.}</title>
<creator></creator>
<album></album>
<annotation></annotation>
<info>%folder%</info>
<image>{.convert|ansi|utf-8|%folder%{.switch|{.^type.}|;|video|{.substring||.%item-ext%|%item-name%.}|folder.}.jpg.}</image>
<trackNum></trackNum>
<duration></duration>
</track>.}
{.save|%folder%playlist{.^type.}.xspf|{.load|enteteplayer.xml.}
{.load|%folder%playlist{.^type.}.xml.}
</trackList>
</playlist>.}
:}
/if.}
*****************************************
enteteplayer.xml (content):
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Liste de lecture</title>
<trackList>
-
Edit August 27, 2009, 12:47 PM:
Sorry, I forgot to translate two or three things :-\ ... I updated the package above.
-
Hi!!!
I got a problem when i play the music in the main audio playlist i can't get the play list to show up, even i have put some music in the map..... And also i can't get the XSPF list generator too work either
-
when uploading mp3 and videos, dose those to have a specefic map with a name on it or can i change the name to something like "mp3" or "video" ?
And also that
{.time|2|
{.copy|E:\audio_playlist_overall_update\playlistaudio.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\audio_playlist_overall_update\playlistaudio.xspf|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xspf|C:\HFS\multimediaeng\playlistes\.}.}
can i change the letter to were i have it on my computer ?
-
when uploading mp3 and videos, dose those to have a specefic map with a name on it or can i change the name to something like "mp3" or "video" ?
You can use any real folder ... provided it has access and upload (rights) permissions.
And also that
{.time|2|
{.copy|E:\audio_playlist_overall_update\playlistaudio.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\audio_playlist_overall_update\playlistaudio.xspf|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xml|C:\HFS\multimediaeng\playlistes\.}
{.copy|E:\video_playlist_overall_update\playlistvideo.xspf|C:\HFS\multimediaeng\playlistes\.}.}
can i change the letter to were i have it on my computer ?
It's even recommended! Yes! ;D
-
@Dragon_Hunter
I deleted all of our posts that followed. They did not solve much, your problem was rather due to some misconfigurations.
I sent you a PM with a pre-configured solution, that I hope you don't lose (it's tiring to repeat the messages for little results).
----------------------------------------------
Perhaps my tutorial is not very clear (if Bacter can give me an opinion about this, I'd like ... your English is safer than mine ;)).
-
Update August 30, 2009
http://hfsupgradefrench.webhop.org/xspf/multimediaeng.zip
-
Update October 20, 2009 ( -> new JW FLV Media Player v4.6 included)
http://hfsupgradefrench.webhop.org/xspf/multimediaeng.zip
-
Update January 31, 2010 ( -> updated JW FLV Media Player v5.0.753 included)
http://hfsupgradefrench.webhop.org/xspf/multimediaeng.zip
-
hate to sound like a noob but i am and i can not figure out how to get my files over to an playlistaudio.xpfs or video file i got everthing else to work aka load the player and all but it does not show my music and im lost help plz i dont even understand how to use the converter that is in the file thanks a lot
-
Sounds very cool. Bit complicated for noobs perhaps.
But is it possible to add support for OGG files? And perhaps even FLAC? And AAC (m4a)?
I have a lot of Ogg Vorbis music files...
Ofcourse support for avi (mpeg4 video and mp3 audio, most downloaded tvshows) would also be great.
-
Hi,
Could someone please re upload his file. Link does not seem to work anymore. I am using hfs as my video server to stream videos over to my Samsung galaxy note device but often times android app player freezes so I am interested to know how to play the video contents using this jw media player instead. I have already tried the rawr live design template but have playback issues and the other one which uses vlc/divx but my phone browser does not seem to support those plugins yet so I am hoping this flash player would do the trick. Thank you in advance! I would really appreciate it.
PS i am very new to all of this by the way so I hope I really I will manage to follow his instruction above afterwards. 8)
-
someone could please repost that zip? :'(
thanks!
-
someone please reupload the files. thanks
-
...
http://www.rejetto.com/forum/hfs-~-http-file-server/serving-video-files/msg1059473/#msg1059473
...
it is better to use a M3U file....
itunes/widnwos media player:
http://www.ehow.com/how_5084943_create-mu-playlist.html
builiding/edit paths:
http://xmtvplayer.com/build-m3u-file
use a free falsh based palyer:
http://stackoverflow.com/questions/11543309/live-flash-player-for-m3u-file
visit here for more help:
http://www.rejetto.com/forum/hfs-~-http-file-server/serving-video-files/msg1059473/#msg1059473
-
@rizanda
look at attached file, it is the same from next link
http://www.rejetto.com/forum/html-templates/music-before-anything-else-mp3-jukebox-video-player/msg1047938/#msg1047938