Windows mediaplayer vormgeving aanpassen

Status
Niet open voor verdere reacties.
H

hetwillem

Gebruiker
Lid geworden
15 mrt 2011
Berichten
52
Dag allemaal, ik heb de laatste tijd gewerkt aan een hobbysite waarin gebruikers radiostations via internet kunnen afluisteren, nou vind ik de opmaak van de (standaard Widows media player balk ) niet echt mooi.

zijn hier oplossingen voor zonder over te stappen naar bijvoorbeeld flash?

Groet
 
Hoei!
Bij een embedded WMPlayer wordt gebruik gemaakt van de WMPlayer die al aanwezig is op de computer van de bezoeker. Die kan wel een andere skin krijgen, als de WMplayer in een apart eigen venster wordt geopend (als de skin wordt gedownload), maar volgens mij kan je niet een embedded WMPlayer voorzien van een eigen skin.
  • Wat ik in Google tegenkwam, wijst allemaal dezelfde kant op: lukt niet.
  • "If you want control of the user experience outside the browser, you can create custom player skins." zegt Microsoft.
Een al dan niet semitransparant plaatje met eigen skin eroverheen plakken lukt ook niet: een WMPlayer heeft knoppen ("controls"), en over dingen met een control kan je niet iets anders plakken: anders zouden de controls niet meer werken.
  • Ook bv. een embedded pdf-venster laat niet iets over zich heen zetten, want daar zitten ook controls op.
Ik vrees dat het toch de kant van een flash-player op moet gaan, als je een mooiere skin dan die van WMP wilt hebben.

Met vriendelijke groet,
CSShunter
 
hartstikke bedankt voor je reactie,
de oplossing die ik nu heb is gewoon een soort "frame" om de player zelf bouwen, waarin die mediaplayer in komt te staan, ik denk dat dat toch al een stuk "rustiger" over komt.
Groet
 
Wat je ook nog zou kunnen doen om het WMPlayer-uiterlijk wat meer te verdoezelen, is: het bovenstuk in negatief zetten, en dan de kleurtint van de WMP geven (kleurtoon 156, intensiteit 50), plus als verlengstukjes de uiteinden mee laten lopen met je vormgeving van het bovenstuk.
Dan wordt het zoiets als:

radiocorner-klein-ori.png
>>
radiocorner-klein-nw.png
Met een beetje mikken van de WMP (wat smaller dan nu) krijg je dan iets dat toch een beetje op een eigen skin gaat lijken. :)

Met vriendelijke groet,
CSShunter
 
CSShunter bedankt voor je reactie, het ziet er inderdaad een stuk beter uit, wat je me gepost hebt! Daar ga ik dit weekend en anders maandag gelijk mee aan de slag.
Ik heb alleen nog een aantal vragen bijvoorbeeld hoe je die wmp zo schuin hebt afgesneden, is het mogelijk om contact met je op tenemen via mail/msn, kan wel wat tips van de Professionals gebruiken ;)

Groetjes Willem
 
Hoi Willem,
Verdere vragen kan je gewoon hier posten: misschien heeft iemand anders eerder een antwoord.

De "schuin afgesneden WMP" is een nepper: de ingehangen WMP is gewoon rechthoekig, de schuine stukjes zitten in de achtergrondfiguur (met een screenshotje is een stukje WMP gekopieerd, en ingeplakt en bijgewerkt in een tekenprogramma).

nep-wmp-skin.png

;)
 
Laatst bewerkt:
oke, ja het gevaar is alleen dat wanneer de site in internet explorer wordt geopend, er de zwarte balk ipv bovenin onderin wordt weergeven. correct me if im wrong. heb me er nog niet volledig in kunnen verdiepen, druk weekend maar maandag ga ik er tegenaan!
Groet
 
Oh nog 1 kleine tip tussen door in chrome krijg ik een firewall melding als ik een zender kies in dit geval 3fm
 
Hoi Willem,
oke, ja het gevaar is alleen dat wanneer de site in internet explorer wordt geopend, er de zwarte balk ipv bovenin onderin wordt weergeven.
Klik om te vergroten...
Ja, die was ik ook al tegengekomen...
Mijn oplossing was: voor IE een eigen backgroundfiguur maken, die daarop aansluit (en de wissel maken met een Conditional Comment).
Aan de knutsel! En na veel plak- en knipwerk: gelukt! Mooi toonbaar in IE, en mooi toonbaar in Firefox.

Maar... :confused:
Bij laatste check voor Chrome, Opera en Safari blijkt: alle browsers hebben andere opvattingen over hoe een Windows Media Player vertoond moet worden. Je verwacht dat de andere browsers meer standaard compliant zijn, en allemaal hetzelfde doen. Nee dus. Bv. Opera toont de zwarte balk óók onderin. Dat valt met css niet op te lossen.
  • Je zou er dan nog een browser-sniffer met javascript op los kunnen laten, maar dat is een techniek die meer nadelen dan voordelen heeft. Niet aan te raden, dus wat anders...
Nu blijkt de zwarte balk veroorzaakt te worden door de eigenschap "ShowStatusBar":
Dan laten we de Status Bar weg! :)
Het nadeel dat de bezoeker dan geen buffer-voortgang balkje te zien krijgt, kan bestreden worden met een home-made progress-balkje (gif-animatie), dat door blijft animeren als er muziek is. - Daar zal niemand bezwaar tegen hebben.
Daarmee ben ik tot dit resultaat gekomen:
Met als opmerkingen:
  • Van de zenders werken alleen de eerste twee (Radio 538 en Qmusic), voor de rest heb ik geen pagina's aangemaakt.
  • Het bestaande stylesheet heb ik losgelaten, en vervangen door veel eenvoudiger styles en html (zie broncode).
  • Bv. de header bestond uit tig plaatjes in verschillende div's van het template, maar met één afbeelding (plus alternatief voor IE) kan dit gewoon in de #wrapper zonder dat er aparte div's voor nodig zijn.
  • Ook de iframe-pagina's met de verschillende zenders zijn aangepast: radio538-nw.htm en qmusic-nw.htm als voorbeeld gedaan, rest gaat analoog.
  • Idem voor de placeholder voor als nog niets gekozen is: test-WMP-skin-placeholder.htm.
  • De lichte randjes links en rechts van de WMP zijn in sommige browsers met geen mogelijkheid weg te krijgen.
  • Alleen Opera (9.64 getest) heeft nu een iets omlaag geschoven WMP, bij FF, IE7, Chrome en Safari sluit de WMP naadloos aan op de tekening.
  • IE8 moet nog getest worden, ik hoop dat die niet ook een afwijkende header nodig heeft.
  • Tenslotte ook de footer in dezelfde kleurtinten gebracht voor de finishing touch.
    O ja, ook in de header 't tikfoutje "u favorieten" door de Typ-ex gehaald. ;)
Geluk ermee!
Met vriendelijke groet,
CSShunter
_________
PS: Houdt de eigenaar van de site de copyright-afdracht voor de muziek goed in de gaten? Bij uitzendingen kan je voor je het weet Brein op je dak krijgen! Ook als je die van een andere streaming bron aftapt, begrijp ik: www.iusmentis.com/auteursrecht/hyperlinks/ (zie ook deze).
 
Laatst bewerkt:
Aller eerst, bedankt voor alle tijd en moeite die je erin gestopt hebt. vind het erg nuttige en goede tips.

nu is bij jou de mediaplayer balk zwart, bij mij is deze zilver..
playerbalk.png

is het mogelijk dat ik deze in de html code zo instel, dat ik de kleur bepaal voor de gebruikers. (voor iedereen zwart dus) anders wordt het toch alweer een lastig verhaal.

Groet
 
Tja, daar was ik vandaag ook achter gekomen. :(
Uit voorzorg had ik in m'n opmerkingen gezet dat ik 'm nog niet in IE8 had kunnen testen. Dat kon ik vandaag ook, op een kast met een andere Windows: en ja hoor, Microsoft heeft weer eens een extra eigenaardigheid:
Conclusie:
Bah, met een aangepaste skin voor verschillende IE-versies (ik stond al in de startblokken om een bg-img in het wit te maken) red je het niet, omdat de standaard WMP-skin OS-afhankelijk is, en niet IE-versie afhankelijk.
Dat betekent dat onder Win7 waarschijnlijk ook Firefox en de andere browsers de witte variant zullen gebruiken (dit kon ik niet testen).
  • Browsershots.org heeft geen optie om bepaalde Win-versies te checken. Maar misschien komt hier toch iets uit (aanvraag loopt).
Al met al lijkt een automatische skin voor de WMP hiermee van de baan: er zijn te veel verschillen.

Wat nog wel kan: een zwarte en een witte/zilveren versie van de bg-figuur maken, en de bezoeker zelf laten kiezen. Dat kan met een simpel stukje javascript.

Of, natuurlijk, toch een flash-player monteren, die al deze bezwaren niet heeft (maar voor deze of gene bezoeker het installeren van een flash-plugin nodig zal hebben).

Met vriendelijke groet,
CSShunter

<edit>
Browsershots is al een heel eind (sommige browsershots-machines hebben plugins uit staan, die geven niets te zien).
Wat wel te zien is: hier heeft Firefox onder WinXP een witte WMPlayer!
Daar zal men de WMPlayer een update gegeven hebben van 11 naar 12.
Waarmee het helemaal niet te voorspellen valt welke skin geleverd moet worden. :eek:
</edit>
 
Laatst bewerkt:
Oke ik snap het, ik ben nu toch wel serieus geïnteresseerd om met een flashspeler te werken.
wat zijn hier de voor en nadelen van ? kunnen die streams die normaal met windowsmediaplayer worden afgespeeld ook gewoon met flash worden afgespeeld?

zoja welke flash speler kan ik het best integreren?

Groet willem
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan