Einführung des livespotting VideoJS-Players

Diese Anleitung erleichtert die Einbindung und Personalisierung des Open Source HTML-Video-Players VideoJS von livespotting in Ihre Webseite.

livespotting setzt auf den Open Source HTML-Video-Player VideoJS zur zuverlässigen Wiedergabe von Medieninhalten. Dieser Leitfaden führt Sie durch den Prozess der Einbindung und Personalisierung des VideoJS-Players in Ihre Webseite, einschließlich der Implementierung des VideoJS-Skripts und -Stylesheets sowie der Anpassung des Players für eine responsive Darstellung.

Anleitung zur Implementierung von VideoJS

1. Einbinden der VideoJS-Bibliotheken

Zuerst müssen wir die VideoJS-Bibliotheken in unsere Webseite einbinden. Das machen wir mit folgenden Codezeilen, die wir in den Head-Bereich unserer HTML-Datei setzen:

<script src="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/static/videojs/dist/video.min.js"></script>
<link href="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/static/videojs/dist/video-js.min.css" rel="stylesheet"/>
<link href="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/static/videojs/dist/video-js-skin.min.css" rel="stylesheet"/>
<script src="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/static/videojs/dist/videojs-overlay.min.js"></script>
<link href="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/static/videojs/dist/videojs-overlay.min.css" rel="stylesheet"/>
<script src="https://livespotting.fra1.cdn.digitaloceanspaces.com/player/videojs-plugin.js"></script>

2. Einrichtung des Video Players

Jetzt können wir den Video Player in unseren Body-Bereich einfügen. Dazu verwenden wir folgenden Code:

<video-js
    id="cmPlayer1"
    data-player="default"
    data-embed="default"
    width="640px"
    height="360px"
    controls
></video-js>

3. Initialisierung des Video Players

Anschließend initialisieren wir den Player mit einem Skript, das wir direkt nach unserem Video-Player-Tag einfügen:

<script>
    const player = videojs('cmPlayer1');
    player.ready(function () {
        this.cmPlayerInit({
            customerId: 'Ihre-Kunden-ID',
            playerId: 'Ihre-Player-ID',
            cameraId: 'Ihre-Kamera-ID',
        });
    });
</script>

Wie macht man den Player responsiv?

Mit VideoJS ist es recht einfach, einen responsiven Player zu erstellen. Dabei ändert sich die Größe des Players dynamisch basierend auf der Größe des Viewports oder des umgebenden Elements. Sie können die CSS-Eigenschaften width und height auf 100% setzen und die CSS-Eigenschaft max-width verwenden, um sicherzustellen, dass der Player nicht über die gewünschte Größe hinaus wächst.

<video-js
    id="cmPlayer1"
    data-player="default"
    data-embed="default"
    class="vjs-fluid"
    controls
></video-js>

In Ihrem CSS:

.vjs-fluid {
    width: 100%;
    height: 100%;
    max-width: 640px;
}

Diese Konfiguration stellt sicher, dass der Player die gesamte Breite des umgebenden Elements einnimmt, aber nicht breiter als 640 Pixel wird.

Weitere Anpassungen

Mit VideoJS können Sie auch viele weitere Anpassungen vornehmen, wie zum Beispiel das Hinzufügen von Untertiteln, das Ändern des Player-Designs und das Hinzufügen von zusätzlichen Steuerelementen. Sie können sich die umfangreiche Dokumentation auf der offiziellen VideoJS-Website ansehen, um mehr zu erfahren.

Bitte beachten Sie, dass Sie in Ihrem tatsächlichen Code die angegebenen Werte für customerId, playerId und cameraId durch die entsprechenden Werte ersetzen müssen, die Sie vom wetter.com livespotting Team erhalten.