close

So verwenden Sie JW Player: Videos einbetten und konfigurieren

Was ist JW Player?

JW Player ist ein leistungsstarkes und flexibles Tool zum Abspielen von Videos auf Ihrer Website. Diese Anleitung bietet eine detaillierte Anleitung zur Verwendung, einschließlich der Anleitung zum Abrufen der Bibliothek über ein CDN oder durch Herunterladen.

So erhalten Sie die JW Player-Bibliothek

Sie haben zwei Möglichkeiten, die JW Player-Bibliothek zu erhalten: über ein CDN oder durch Herunterladen für lokales Hosting.

1. Verwendung eines CDN(empfohlen)

Die Verwendung eines CDN(Content Delivery Network) ist die einfachste und schnellste Möglichkeit, JW Player zu integrieren. Ein CDN beschleunigt das Laden der Dateien, da sie auf mehreren Servern weltweit gehostet werden.

Um das CDN zu verwenden, fügen Sie einfach die folgende Codezeile in den <head>Abschnitt Ihrer Website ein. Hinweis: <YOUR_LICENSE_KEY> Sie müssen sie durch Ihren tatsächlichen Lizenzschlüssel ersetzen .

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Herunterladen und lokales Hosten

Wenn Sie die volle Kontrolle über die Dateien haben möchten und nicht auf eine Netzwerkverbindung angewiesen sind, können Sie JW Player herunterladen und auf Ihrem eigenen Server hosten.

  1. Gehen Sie zur offiziellen JW Player-Website.

  2. Registrieren Sie sich oder melden Sie sich bei Ihrem Konto an(eine kostenlose Testversion ist verfügbar).

  3. Suchen und laden Sie die Bibliothek über Ihr Konto-Dashboard herunter.

  4. Entpacken Sie die Datei und laden Sie den Ordner auf Ihren Server hoch.

Ausführliche Anleitung zur Verwendung des JW Players

Sobald Sie über die Bibliothek verfügen, können Sie mit der Einbettung des JW Players in Ihre Website beginnen.

1. Erstellen Sie eine HTML-Datei und betten Sie den JW Player ein

Hier ist ein vollständiges HTML-Beispiel. Wenn Sie das CDN verwenden, ersetzen Sie die <script src="...">Zeile durch den oben genannten CDN-Code. Wenn Sie die heruntergeladene Bibliothek verwenden, stellen Sie sicher, dass der Pfad zur jwplayer.jsDatei korrekt ist.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. Detaillierte Erläuterung des Codes

  • <script src="...">: Diese Zeile verknüpft die JW Player-Bibliothek mit Ihrer Website.

  • <div id="video-container"></div>: Hier wird das Video angezeigt. Sie können einen beliebigen Namen vergeben, achten Sie jedoch darauf, dass er mit dem in der Funktion idverwendeten Namen übereinstimmt .jwplayer()

  • jwplayer("video-container").setup({...}): Hier initialisieren und konfigurieren Sie JW Player.

    • "file": Der Pfad zu Ihrer Videodatei.

    • "image": Der Pfad zum Miniaturbild des Videos.

    • "width"und "height": Legt die Abmessungen für den Player fest. Sie können auch "100%"für einen responsiven Player verwenden.

    • "autostart": Auf einstellen true, wenn das Video automatisch abgespielt werden soll.

    • "controls": Auf einstellen, falsewenn Sie die Player-Steuerung ausblenden möchten.

Mit dieser ausführlichen Anleitung können Sie JW Player ganz einfach zum Anzeigen von Videos auf Ihrer Website verwenden.