close

Cum se utilizează JW Player: Încorporarea și configurarea videoclipurilor

Ce este JW Player?

JW Player este un instrument puternic și flexibil pentru redarea videoclipurilor pe site-ul dvs. web. Acest ghid vă va oferi o explicație detaliată a modului de utilizare a acestuia, inclusiv cum să obțineți biblioteca folosind o rețea CDN sau descărcând-o.

Cum se obține Biblioteca JW Player

Ai două opțiuni pentru a obține biblioteca JW Player: folosind o rețea CDN sau descărcându-o pentru găzduire locală.

1. Utilizarea unei rețele CDN(recomandată)

Utilizarea unei rețele CDN(Content Delivery Network) este cea mai simplă și rapidă modalitate de a integra JW Player. O CDN ajută la încărcarea mai rapidă a fișierelor, deoarece acestea sunt găzduite pe mai multe servere din întreaga lume.

Pentru a utiliza CDN-ul, pur și simplu adăugați următoarea linie de cod în <head>secțiunea de pe site-ul dvs. web. Notă: Trebuie să o înlocuiți <YOUR_LICENSE_KEY>cu cheia dvs. de licență reală.

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

2. Descărcarea și găzduirea locală

Dacă doriți control deplin asupra fișierelor și nu doriți să vă bazați pe o conexiune la rețea, puteți descărca JW Player și îl puteți găzdui pe propriul server.

  1. Accesați site-ul oficial JW Player.

  2. Înregistrează-te sau conectează-te la contul tău(este disponibilă o versiune de încercare gratuită).

  3. Găsește și descarcă biblioteca din tabloul de bord al contului tău.

  4. Dezarhivează fișierul și încarcă folderul pe serverul tău.

Ghid detaliat pentru utilizarea JW Player

După ce ai biblioteca, poți începe să integrezi JW Player în site-ul tău web.

1. Creați un fișier HTML și încorporați JW Player

Iată un exemplu HTML complet. Dacă utilizați CDN, înlocuiți <script src="...">linia cu codul CDN menționat mai sus. Dacă utilizați biblioteca descărcată, asigurați-vă că jwplayer.jseste corectă calea către fișier.

<!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. Explicație detaliată a Codului

  • <script src="...">Această linie face legătura dintre biblioteca JW Player și site-ul dvs. web.

  • <div id="video-container"></div>Aici va fi afișat videoclipul. Îi puteți da orice nume iddoriți, dar asigurați-vă că se potrivește cu numele folosit în jwplayer()funcție.

  • jwplayer("video-container").setup({...})Aici inițializezi și configurezi JW Player.

    • "file"Calea către fișierul video.

    • "image"Calea către imaginea miniaturală a videoclipului.

    • "width"și "height": Setează dimensiunile pentru player. Puteți folosi și "100%"pentru un player responsiv.

    • "autostart": Setați la truedacă doriți ca videoclipul să fie redat automat.

    • "controls": Setați la falsedacă doriți să ascundeți comenzile playerului.

Cu acest ghid detaliat, poți începe cu ușurință să utilizezi JW Player pentru a afișa videoclipuri pe site-ul tău web.