close

Slik bruker du JW Player: Bygg inn og konfigurer videoer

Hva er JW Player?

JW Player er et kraftig og fleksibelt verktøy for å spille av videoer på nettstedet ditt. Denne veiledningen gir en detaljert gjennomgang av hvordan du bruker det, inkludert hvordan du får tilgang til biblioteket ved hjelp av et CDN eller ved å laste det ned.

Slik får du tak i JW Player-biblioteket

Du har to alternativer for å få tak i JW Player-biblioteket: bruke et CDN eller laste det ned for lokal hosting.

1. Bruk av et CDN(anbefales)

Å bruke et CDN(Content Delivery Network) er den enkleste og raskeste måten å integrere JW Player på. Et CDN bidrar til å laste inn filene raskere fordi de ligger på flere servere rundt om i verden.

For å bruke CDN-et, legg ganske enkelt til følgende kodelinje i <head>-delen av nettstedet ditt. Merk: Du må erstatte <YOUR_LICENSE_KEY>med din faktiske lisensnøkkel.

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

2. Nedlasting og lokal hosting

Hvis du vil ha full kontroll over filene og ikke vil være avhengig av en nettverkstilkobling, kan du laste ned JW Player og lagre den på din egen server.

  1. Gå til den offisielle JW Player-nettsiden.

  2. Registrer deg eller logg inn på kontoen din(en gratis prøveperiode er tilgjengelig).

  3. Finn og last ned biblioteket fra kontoens dashbord.

  4. Pakk ut filen og last opp mappen til serveren din.

Detaljert veiledning for bruk av JW Player

Når du har biblioteket, kan du begynne å legge inn JW Player på nettstedet ditt.

1. Opprett en HTML-fil og legg inn JW Player

Her er et komplett HTML-eksempel. Hvis du bruker CDN, erstatt <script src="...">linjen med CDN-koden nevnt ovenfor. Hvis du bruker det nedlastede biblioteket, må du sørge for at banen til jwplayer.jsfilen er riktig.

<!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. Detaljert forklaring av koden

  • <script src="...">Denne linjen kobler JW Player-biblioteket til nettstedet ditt.

  • <div id="video-container"></div>Det er her videoen skal vises. Du kan gi den hva iddu vil, men sørg for at det samsvarer med navnet som brukes i jwplayer()funksjonen.

  • jwplayer("video-container").setup({...})Det er her du initialiserer og konfigurerer JW Player.

    • "file": Banen til videofilen din.

    • "image": Banen til videominiatyrbildet.

    • "width"og "height": Angir dimensjonene for spilleren. Du kan også bruke "100%"for en responsiv spiller.

    • "autostart": Sett til truehvis du vil at videoen skal spilles av automatisk.

    • "controls": Sett til falsehvis du vil skjule spillerkontrollene.

Med denne detaljerte veiledningen kan du enkelt begynne å bruke JW Player til å vise videoer på nettstedet ditt.