close

JW Player gebruiken: video's insluiten en configureren

Wat is JW Player?

JW Player is een krachtige en flexibele tool voor het afspelen van video's op je website. Deze handleiding biedt een gedetailleerde handleiding voor het gebruik ervan, inclusief hoe je de bibliotheek kunt verkrijgen via een CDN of door deze te downloaden.

Hoe krijg je de JW Player-bibliotheek?

U hebt twee opties om de JW Player-bibliotheek te verkrijgen: via een CDN of door de bibliotheek te downloaden voor lokale hosting.

1. Een CDN gebruiken(aanbevolen)

Het gebruik van een CDN(Content Delivery Network) is de eenvoudigste en snelste manier om JW Player te integreren. Een CDN helpt bestanden sneller te laden omdat ze op meerdere servers wereldwijd worden gehost.

Om het CDN te gebruiken, voegt u eenvoudig de volgende regel code toe aan de <head>sectie van uw website. Let op: u moet deze vervangen <YOUR_LICENSE_KEY>door uw eigen licentiesleutel.

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

2. Lokaal downloaden en hosten

Als u volledige controle over de bestanden wilt hebben en niet afhankelijk wilt zijn van een netwerkverbinding, kunt u JW Player downloaden en op uw eigen server hosten.

  1. Ga naar de officiële JW Player-website.

  2. Meld u aan of log in op uw account(er is een gratis proefperiode beschikbaar).

  3. Zoek en download de bibliotheek via het dashboard van uw account.

  4. Pak het bestand uit en upload de map naar uw server.

Gedetailleerde handleiding voor het gebruik van JW Player

Zodra u de bibliotheek hebt, kunt u JW Player in uw website integreren.

1. Maak een HTML-bestand en sluit JW Player in

Hier is een volledig HTML-voorbeeld. Als u het CDN gebruikt, vervangt u de <script src="...">regel door de hierboven genoemde CDN-code. Als u de gedownloade bibliotheek gebruikt, controleer dan of het pad naar het jwplayer.jsbestand correct is.

<!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. Gedetailleerde uitleg van de code

  • <script src="...">:Deze regel koppelt de JW Player-bibliotheek aan uw website.

  • <div id="video-container"></div>: Hier wordt de video weergegeven. Je kunt er een naam aan geven die idje wilt, maar zorg ervoor dat deze overeenkomt met de naam die in de jwplayer()functie wordt gebruikt.

  • jwplayer("video-container").setup({...}):Hier initialiseert en configureert u JW Player.

    • "file": Het pad naar uw videobestand.

    • "image": Het pad naar de videominiatuurafbeelding.

    • "width"en "height": Stelt de afmetingen voor de speler in. Je kunt dit ook gebruiken "100%"voor een responsieve speler.

    • "autostart": Stel deze optie in trueals u wilt dat de video automatisch wordt afgespeeld.

    • "controls": Stel deze optie in falseals u de bedieningselementen van de speler wilt verbergen.

Met deze gedetailleerde handleiding kunt u eenvoudig JW Player gebruiken om video's op uw website weer te geven.