Καλώς ήρθατε στο forum μας! Για να συμμετάσχετε στις συζητήσεις θα πρέπει να είσαστε μέλος. Γίνετε μέλος τώρα!.
Moderators:
Super-Moderators, WebDev Moderators
| Αποστολέας | Μήνυμα |
fafos
Script Master  Μέλος από: 30 Νοε 2004 Βοηθήματα: 17 Scripts: 6 Μηνύματα: 256+
|
Στις: 23 Ιαν 2010 20:49 Θέμα:
Flash Player για radio stream με τον JW player |
|
|
Flash Player για radio stream με τον JW player:
Στο παρακάτω βοήθημα μπορούμε να φτιάξουμε έναν flash player για να παίζουμε κάποιον(ους) ραδιοφωνικό σταθμό στην ιστοσελίδα μας.
Στο βοήθημα αναπτύσσω την ιδέα για 1 ράδιο αλλά λόγω του ότι χρησιμοποιούμε xml playlist μπορείτε να βάλετε όσους σταθμούς θέλετε.
1. Κατεβάστε τον JW flash player: http://www.longtailvideo.com/players/jw-flv-player/
o player υπάρχει και σε commercial lisence όπου δεν εμφανίζεται το logo (εμφανίζεται για λίγο με την έναρξη του player στην free έκδοση) και επίσης έχετε την δυνατότητα να δημιουργήσετε το δικό σας layout σε ένα αρχείο xml. Ο free δεν έχει αυτές τις δυνατότητες.
αποσυμπιέστε το zip αρχείο... από τα αρχεία που υπάρχουν μέσα θα χρειαστούμε μόνο το swfobject.js και το player.swf (ή player-viral.swf ανάλογα με το τι κατεβάσατε).
2. Πάρτε το stream url του σταθμού (π.χ. http://www.elgr.info/tunein.php/enimerosi/playlist.asx) και ανοίξτε το με το notepad (στο ανοιγμα αρχείου βάζουμε την παραπάνω διεύθυνση)... αυτό θα μας δώσει τα στοιχεία του σταθμού:
| κώδικας: | <asx version = "3.0">
<Title>:: ENIMERWSI.GR RADIO::</Title>
<Author>http://www.enimerwsi.gr</Author>
<Copyright> :: ENIMERWSI.GR ::</Copyright>
<PARAM name="HTMLView" value="http://www.enimerwsi.gr" />
<MoreInfo href="http://www.enimerwsi.gr" />
<entry>
<ref href="http://174.36.237.66:8152" />
<Title>:: ENIMERWSI.GR RADIO::</Title>
<Author>http://www.enimerwsi.gr</Author>
</entry>
</asx> |
εμάς μας ενδιαφέρει αυτό:
| κώδικας: | | <ref href="http://174.36.237.66:8152" /> |
αυτό το link θα το χρησιμοποιήσουμε παρακάτω...
3. δημιουργούμε στο notepad ένα αρχείο xml με τον παρακάτω κώδικα:
| κώδικας: |
<?xml version='1.0' encoding='UTF-8'?>
<playlist version="1" xmlns="http://xspf.org/ns/0/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
<trackList>
<track>
<creator>Enimerwsi.gr</creator>
<title>ENIMERWSI.GR RADIO</title>
<jwplayer:description>kapoio allo keimeno edo</jwplayer:description>
<location>http://174.36.237.66:8152/;*.nsv</location>
<info>http://enimerwsi.gr/</info>
<jwplayer:type>sound</jwplayer:type>
<jwplayer:image>fafos.png</jwplayer:image>
<jwplayer:duration>28800</jwplayer:duration>
</track>
</trackList>
</playlist>
|
στο creator γράφουμε τον τίτλο του site
στο title γράφουμε κάποιον τίτλο (π.χ. Το ράδιο αρβύλα)
στο description γράφουμε κάποιες άλλες πληροφορίες (π.χ. κάποιο slogan)
στο location βάζουμε το link που είπαμε παραπάνω (http://174.36.237.66:8152) προσθέτοντας τα: /;*.nsv
το type το αφήνουμε πάντα με value sound
στο image βάζουμε κάποια εικόνα ή λογότυπο αλλά προσέχουμε τις διαστάσεις να μην είναι πολύ μικρή ή πολύ μεγάλη η εικόνα!
το duration χρησιμεύει για να δίνουμε στην playlist τον χρόνο αλλαγής στον επόμενο σταθμό αν έχουμε πολλούς σταθμούς στον ίδιο player.. για έναν σταθμό αφήστε το στα 28800.
Αν θέλετε να προσθέσετε και άλλον σταθμό επαναλάβατε από κάτω το κομμάτι κώδικα:
| κώδικας: | <trackList>
<track>
<creator>Enimerwsi.gr</creator>
<title>ENIMERWSI.GR RADIO</title>
<jwplayer:description>kapoio allo keimeno edo</jwplayer:description>
<location>http://174.36.237.66:8152/;*.nsv</location>
<info>http://enimerwsi.gr/</info>
<jwplayer:type>sound</jwplayer:type>
<jwplayer:image>fafos.png</jwplayer:image>
<jwplayer:duration>28800</jwplayer:duration>
</track>
</trackList> |
αλλάζοντας βέβαια τα δεδομένα για τον νέο σταθμό..
4. Στην σελίδα που θέλουμε να εμφανίσουμε τον player για αρχή καλούμε το swfobject:
| παράθεση: | | <script language="javascript" type="text/javascript" src="swfobject.js"></script> |
από κάτω βάζουμε ένα javascript που μας βοηθά περισσότερο όταν έχουμε πάνω από 1 σταθμό τον player.. εσείς βάλτε τον κώδικα ακόμα και για 1 σταθμό.. στο ιδιο javascript βάζουμε και τον κώδικα για τον player:
| κώδικας: | <script language="javascript" type="text/javascript">
var player = null;
var playlist = null;
var currentTime = 0;
var previousTime = -1;
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addModelListener('TIME', 'timeMonitor');
checkTime();
}
else
{
setTimeout("addListeners();", 50);
}
};
function timeMonitor(obj) {
currentTime = obj.position
if(currentTime < previousTime) {
previousTime = -1;
}
};
function checkTime()
{
if(previousTime < currentTime)
{
previousTime = currentTime;
}
else
{
player.sendEvent('NEXT');
$(".bottom").effect("highlight", {"color":"blue"}, 2000);
}
setTimeout("checkTime();", 15000);
};
function gid(name)
{
return document.getElementById(name);
};
function radio() {
var s1 = new SWFObject('player-viral.swf','mediaplayer','420','100','9');
s1.addParam('allowfullscreen','false');
s1.addParam('allowscriptaccess','always');
s1.addVariable("backcolor","0x000000");
s1.addVariable("frontcolor","0xFFFFFF");
s1.addVariable("lightcolor","0xCCCC00");
s1.addVariable("volume","60");
s1.addVariable('file', 'radio.xml');
s1.addVariable('skin', 'snel.swf');
s1.addVariable('autoscroll','true');
s1.addVariable('playlist','top');
s1.addVariable('playlistsize','360');
s1.addVariable('repeat','always');
s1.addVariable('autostart','true');
s1.write('radio');
};
window.onload = radio
</script>
|
Για το τι κάνει το κάθε variable μπορείτε να διαβάσετε εδώ: http://developer.longtailvideo.com/trac/wiki/Player5FlashVars
οι δυνατότητες του player είναι πολλές και δεν μπορώ να τις αναλύσω εδώ. Αυτά που πρέπει να προσέξετε είναι η διαδρομή προς το swf αρχείο (player-viral.swf) και οι διαστάσεις που δίνει ('420','100')
αν διαβάσετε καλά τα variables μπορείτε να αλλάξετε την εμφάνιση του player. Η εταιρεία τους έχει και κάποια skins τα οποία αυτή την στιγμή τα πουλά (παλιά τα είχε free). Εγώ στο demο μου χρησιμοποιώ ένα από αυτά τα skins το οποίο είναι με commercial license και αν το κατεβάσετε η ευθύνη είναι δική σας !
Ο player θα εμφανιστεί όπου βάλετε αυτό το div:
| κώδικας: | | <div id="radio" ></div> |
Δείτε ένα demo εδώ (1 σταθμό)
και εδώ:
Δείτε ένα demo εδώ (2 σταθμοί)
Επισυνάπτω τα αρχεία που χρησιμοποιώ για το demo με ένα ράδιο (χωρίς το skin)
Ο player μπορεί να γίνει πιο δυναμικός χρησιμοποιώντας λίγη php και ajax για να δείχνει πιο τραγούδι παίζει ο σταθμός μέσα στον player.. αυτό δυστυχώς χρειάζεται να έχω πρόσβαση σε κάποιον λογαριασμό shoutcast κάτι το οποίο δεν έχω..
| Description: |
|
 Download |
| Filename: |
radio.zip |
| Filesize: |
122.62 KB |
| Downloaded: |
1378 Time(s) |
_________________ Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...
|
|
|
|
billiaswhs
Μέλος από: 11 Νοε 2004 Μηνύματα: 256+
|
|
|
|
fafos
Script Master  Μέλος από: 30 Νοε 2004 Βοηθήματα: 17 Scripts: 6 Μηνύματα: 256+
|
|
|
|
billiaswhs
Μέλος από: 11 Νοε 2004 Μηνύματα: 256+
|
|
|
|
deejayfm
Μέλος από: 12 Σεπ 2010 Μηνύματα: 1
|
|
|
|
webmonster
Μέλος από: 06 Οκτ 2010 Μηνύματα: 8
|
Στις: 01 Νοε 2010 06:23 Θέμα:
ΠΑΙΔΙΑ ΜΠΟΡΕΙΤΕ ΝΑ ΜΟΥ modarete ΤΟ PLAYER Περιγραφή θέματος: einaietimo katebaseto |
|
|
|
|
|
|
|
PhaNToM
Μέλος από: 06 Αυγ 2012 Μηνύματα: 1 Περιοχή: Ελλάδα
|
|
|
|
dj_kostas_pro
 Μέλος από: 10 Οκτ 2007 Μηνύματα: 190Περιοχή: Θεσσαλονίκη
|
|
|
|
|
Τώρα είναι 23 Μαη 2013 11:21 | All times are UTC + 3 (DST in action)
|