Support Technisch Hoe plaats ik een webplayer op mijn website?

Hoe plaats ik een webplayer op mijn website?

Met een webplayer kunnen bezoekers op je site direct naar de audio stream luisteren vanuit hun browser. Ze hoeven dus geen extra applicatie (zoals VLC, of QuickTime) te openen om je stream te kunnen beluisteren.

Er zijn veel verschillende webplayers beschikbaar. Hieronder geven we een uitleg over hoe je gebruik kunt maken van:

  1. De standaard HTML5 audio player. Dit is de methode die wij aanraden.
  2. De player uit het Centova Cast control panel
  3. Een andere webplayer

Let op, in deze instructies verwijzen wij direct naar de https url van de stream. Deze vind je niet terug in Centova Cast. Wij raden aan altijd gebruik te maken van https.

HTML5 audio player

Alle moderne browsers (waaronder ook mobiele browsers) ondersteunen tegenwoordig de HTML5 <audio> tag. Hiermee kun je een browser heel gemakkelijk een audio-stream laten inladen.

<audio>
    <source src="https://{server}.streampakket.com/proxy/{gebruikersnaam}?mp=/{mountpoint}">
</audio>

Vervang daarbij “variabelen” {server}, {gebruikersnaam} en {mountpoint} door hetgeen voor jou van toepassing is.

  • Bij {server} vul je het nummer in van de server waarop je stream draait. Bijvoorbeeld caster05.
  • Bij {gebruikersnaam} vul je de gebruikersnaam in van waarmee je ook in Centova Cast inlogt. Bijvoorbeeld streampakket.
  • Bij {mountpoint} vul je de naam van je mountpoint in. Standaard is dit “stream”, maar je kunt natuurlijk zelf een ander mount point hebben aangemaakt.

Wanneer je alles ingesteld hebt dan ziet de audio tag dus ongeveer zo uit:

<audio>
    <source src="https://caster05.streampakket.com/proxy/streampakket?mp=/stream">
</audio>

Tip: open de stream url direct in je browser, zoals Chrome, of Firefox. Je zult dan direct zien en horen of je de correcte url hebt.

Players uit Centova Cast

Wanneer je ingelogd bent in Centova Cast (lees hoe je inlogt), kun je in het menu het item ‘Widgets’ vinden.

Op deze pagina kun je bovenaan kiezen voor welk mount point je een player wilt maken. Daarnaast kun je onderin (via de tekst ‘Select a skin’) het uiterlijk van je player selecteren.

Na het kiezen van deze twee eigenschappen, geeft Centova Cast je twee velden terug:

  1. De code die je dient te plaatsen op de plek waar je de player wilt weergeven op je website
  2. De code die je dient te plaatsen voor de </body>-tag van je website. Dit bevindt zich (bijna) helemaal onderaan je webpagina

Elke andere webplayer

Elke andere webplayer heeft zijn eigen code en zijn eigen manier van plaatsen. Wel zul je altijd ergens in de code je eigen stream-URL moeten plaatsen. Hier vul je dan het volgende in:

https://{server}.streampakket.com/proxy/{gebruikersnaam}?mp=/{mountpoint}

Vervang daarbij “variabelen” {server}, {gebruikersnaam} en {mountpoint} door hetgeen voor jou van toepassing is. Zie ook de toelichting onder het kopje HTML5 Audio Player op deze pagina.

Indien je op zoek bent naar een webplayer met een bepaalde weergave, dan kun je wellicht iets moois maken via de website van Muses.

Veilig en gemakkelijk betalen met