close

JW Playerin käyttö: Videoiden upottaminen ja määrittäminen

Mikä on JW Player?

JW Player on tehokas ja joustava työkalu videoiden toistamiseen verkkosivustollasi. Tämä opas tarjoaa yksityiskohtaisen opastuksen sen käyttöön, mukaan lukien kirjaston hankkimisen CDN:n avulla tai lataamalla sen.

JW Player -kirjaston hankkiminen

JW Player -kirjaston hankkimiseen on kaksi vaihtoehtoa: CDN:n käyttö tai sen lataaminen paikalliseen ylläpitoon.

1. CDN:n käyttö(suositus)

CDN:n(Content Delivery Network) käyttö on yksinkertaisin ja nopein tapa integroida JW Player. CDN auttaa lataamaan tiedostoja nopeammin, koska ne sijaitsevat useilla palvelimilla ympäri maailmaa.

Käyttääksesi CDN:ää, lisää vain seuraava koodirivi <head>verkkosivustosi osioon. Huomautus: Sinun on korvattava <YOUR_LICENSE_KEY>se varsinaisella lisenssiavaimellasi.

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

2. Lataaminen ja ylläpito paikallisesti

Jos haluat täyden hallinnan tiedostoista etkä halua olla riippuvainen verkkoyhteydestä, voit ladata JW Playerin ja isännöidä sitä omalla palvelimellasi.

  1. Siirry JW Playerin viralliselle verkkosivustolle.

  2. Rekisteröidy tai kirjaudu tilillesi(saatavilla on ilmainen kokeilujakso).

  3. Etsi ja lataa kirjasto tilisi hallintapaneelista.

  4. Pura tiedosto ja lataa kansio palvelimellesi.

Yksityiskohtainen opas JW Playerin käyttöön

Kun sinulla on kirjasto, voit aloittaa JW Playerin upottamisen verkkosivustollesi.

1. Luo HTML-tiedosto ja upota JW Player

Tässä on täydellinen HTML-esimerkki. Jos käytät CDN:ää, korvaa <script src="...">rivi yllä mainitulla CDN-koodilla. Jos käytät ladattua kirjastoa, varmista, että tiedostopolku jwplayer.json oikea.

<!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. Koodin yksityiskohtainen selitys

  • <script src="...">: Tämä rivi linkittää JW Player -kirjaston verkkosivustoosi.

  • <div id="video-container"></div>: Tässä video näytetään. Voit antaa sille minkä tahansa idnimen, mutta varmista, että se vastaa funktiossa käytettyä nimeä jwplayer().

  • jwplayer("video-container").setup({...})Tässä vaiheessa JW Player alustetaan ja määritetään.

    • "file": Videotiedostosi polku.

    • "image": Polku videon pikkukuvaan.

    • "width"ja "height": Asettaa soittimen mitat. Voit käyttää tätä myös "100%"responsiivista soitinta varten.

    • "autostart": Aseta tämä, truejos haluat videon toistuvan automaattisesti.

    • "controls": Aseta tämä, falsejos haluat piilottaa soittimen säätimet.

Tämän yksityiskohtaisen oppaan avulla voit helposti aloittaa JW Playerin käytön videoiden näyttämiseen verkkosivustollasi.