[EIGEN WEBSITE] Uitgebreide info over het gebruik van de embed-code

Voor het laatst bijgewerkt op May 07, 2020 10:42

De audio en video player van kerkdienstgemist.nl kunnen binnen een website worden ge├»ntegreerd. Daarvoor is een kant en klare embed code te vinden in de beheeromgeving.

Opvragen van de code

Voor de audio- en video-uitzending en het archief zijn aparte embed codes beschikbaar. Deze zijn te vinden bij de desbetreffende kanaal/archief-pagina onder de knop Embed-code.

Plaatsen van de code

Het code fragment betreft een IFRAME wat wil zeggen dat er op de plek waar deze wordt geplaatst een kader wordt gegenereerd waarin de player wordt vertoond.

Aanpassen van de code

De volgende attributen van het iframe zijn aan te passen:

  • src Verplicht
    Dit is de URL van de daadwerkelijke embed pagina.
    Deze begint niet met een http:// of https:// maar met //. Dit wordt een "protocol-relative URL" genoemd en is geldige html. Hiermee kan een player in beveiligde en onbeveiligde sites worden geplaatst.
  • width en height getal
    Dit is de breedte en hoogte van het iframe. Afhankelijk van het type embed code geven wij hier standaard een waarde. Dit is eventueel zelf met CSS ook aan te passen, zie het voorbeeld hieronder.

Aan het src URL kunnen een aantal parameters worden meegegeven:

  • playerheight getal
    Hiermee geef je de hoogte op van de speler. Dit is alleen van toepassing bij een archief embed code.
  • per_page getal (maximaal 20)
    Dit geeft bij een archief embed code aan hoeveel opnames in het lijstje te zien zijn. 
  • limit getal
    Dit geeft bij een archief embed code aan hoeveel opnames er in totaal via de embed code terug te zien zijn.
  • media video
    De embed code geeft standaard een lijst met audio opnames weer. Voeg deze parameter toe om de lijst met video opnames te tonen.
  • autostart true/false
    Geeft aan of het afspelen van een live uitzending direct moet starten
  • fluid true/false
    Zie alinea hieronder
  • responsive true/false
    Zie alinea hieronder
  • aspectratio getal:getal
    Zie alinea hieronder

De parameters fluid, responsive en aspectratio zijn specifieke parameters voor de videojs mediaspeler, en bepalen hoe de videojs mediaspeler zich gedraagt bij schalende (responsive) websites. Zie hieronder een voorbeeld van een responsive player. Voor meer informatie over hoe deze parameters toe te passen zie de website van videojs: https://docs.videojs.com/tutorial-layout.html Let op dat u playerheight op 0 zet als u deze parameters gebruikt.

Voorbeeld responsive embed code:

Voorbeeld hoe u een embed code responsive kunt maken.

<style>
.kdgm-responsive-player {
    position: relative;
    padding-bottom: 56.25%; /* 75% voor 4:3 video */
    height: 0;
    overflow: hidden;
}
.kdgm-responsive-player iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="kdgm-responsive-player">
    <!-- Plaats hier de <iframe> embed code voor een live uitzending-->
    <iframe scrolling="no" height="360" width="640" allowTransparency="true" frameborder="0" borderwidth="0" borderheight="0"
	allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen"
        src="//kerkdienstgemist.nl/streams/:id/embed" >
    </iframe>
</div>
<div class="kdgm-repsonsive-player">
    <!-- Plaats hier de <iframe> embed code voor een archief-->
    <iframe scrolling="no" width="640" height="560" allowTransparency="true" frameborder="0" borderwidth="0" borderheight="0"
        allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen"
        src="//kerkdienstgemist.nl/playlists/:id/embed?media=video&playerheight=0&fluid=true&aspectratio=16:9">
    </iframe>
</div>

Bekende problemen

  • Full screen werkt niet
    Sinds 12 december 2016 is er een nieuwe embed code. Daarin staat het extra attribuut allowfullscreen="true". Zonder dit attribuut kan de player niet naar full screen. Tevens werken sommige browsers niet zonder de HTML5 doctype tag:<!DOCTYPE html>
  • Automatisch afspelen werkt niet (meer) in Chrome
    Chrome heeft de beveiliging verder opgevoerd. Het speelt media niet meer automatisch af. Tenzij je meerdere malen op dezelfde website media hebt afgespeeld. Als de speler via een iframe op een andere website staat moet de volgende tag op het iframe staan: allow="autoplay; fullscreen"