Stream Embed Beispiel

Live-Vorschau

Einbettungs-Code (Responsive 16:9)

Empfohlen für die meisten Webseiten: Responsives Design, passt sich automatisch an die Bildschirmgröße an.

<!-- Responsive 16:9 Container -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe 
        src="http://localhost:8081/player-embed.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
        allowfullscreen 
        allow="autoplay">
    </iframe>
</div>

Einbettungs-Code (Feste Größe)

Für spezifische Layouts: Feste Breite und Höhe.

<iframe 
    src="http://localhost:8081/player-embed.html" 
    width="800" 
    height="450" 
    frameborder="0" 
    allowfullscreen 
    allow="autoplay">
</iframe>

Mit benutzerdefinierter Stream-URL

Für mehrere Streams: Stream-URL als Parameter übergeben.

<iframe 
    src="http://localhost:8081/player-embed.html?url=http://localhost:8080/live/stream2.flv" 
    width="800" 
    height="450" 
    frameborder="0" 
    allowfullscreen 
    allow="autoplay">
</iframe>

WordPress Integration

Für WordPress-Websites: Im HTML/Code-Block einfügen.

[custom-html]
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe 
        src="http://localhost:8081/player-embed.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
        allowfullscreen 
        allow="autoplay">
    </iframe>
</div>
[/custom-html]

Wichtige Hinweise

localhost → Domain: Für die Produktion ersetze localhost:8081 mit streaming.swissliveauction.ch
HTTPS: Bei SSL-Zertifikaten verwende https:// statt http://
Autoplay: Das allow="autoplay" Attribut ist wichtig für automatisches Abspielen
Mobile: Der Player funktioniert auf allen Geräten (Desktop, Tablet, Smartphone)
Performance: Ein Stream kann von ~1000 Zuschauern gleichzeitig geschaut werden

Für Production (streaming.swissliveauction.ch)

<!-- Produktions-Code mit HTTPS -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe 
        src="https://streaming.swissliveauction.ch/player-embed.html" 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
        allowfullscreen 
        allow="autoplay">
    </iframe>
</div>