close

Come usare JW Player: incorporare e configurare i video

Che cos'è JW Player?

JW Player è uno strumento potente e flessibile per riprodurre video sul tuo sito web. Questa guida ti fornirà una guida dettagliata su come utilizzarlo, incluso come ottenere la libreria tramite CDN o scaricandola.

Come ottenere la libreria JW Player

Per ottenere la libreria JW Player hai due possibilità: usare una CDN o scaricarla per l'hosting locale.

1. Utilizzo di un CDN(consigliato)

Utilizzare una CDN(Content Delivery Network) è il modo più semplice e veloce per integrare JW Player. Una CDN aiuta a caricare i file più velocemente perché sono ospitati su più server in tutto il mondo.

Per utilizzare la CDN, è sufficiente aggiungere la seguente riga di codice alla <head>sezione del tuo sito web. Nota: è necessario sostituire <YOUR_LICENSE_KEY>con la chiave di licenza effettiva.

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

2. Download e hosting locale

Se desideri avere il controllo completo sui file e non vuoi dipendere da una connessione di rete, puoi scaricare JW Player e ospitarlo sul tuo server.

  1. Vai al sito ufficiale di JW Player.

  2. Registrati o accedi al tuo account(è disponibile una prova gratuita).

  3. Trova e scarica la libreria dalla dashboard del tuo account.

  4. Decomprimi il file e carica la cartella sul tuo server.

Guida dettagliata all'utilizzo di JW Player

Una volta ottenuta la libreria, puoi iniziare a incorporare JW Player nel tuo sito web.

1. Crea un file HTML e incorpora JW Player

Ecco un esempio HTML completo. Se stai utilizzando la CDN, sostituisci la <script src="...">riga con il codice CDN menzionato sopra. Se stai utilizzando la libreria scaricata, assicurati che il percorso del jwplayer.jsfile sia corretto.

<!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. Spiegazione dettagliata del Codice

  • <script src="...">: Questa riga collega la libreria JW Player al tuo sito web.

  • <div id="video-container"></div>: Qui verrà visualizzato il video. Puoi assegnargli il nome che idpreferisci, ma assicurati che corrisponda al nome utilizzato nella jwplayer()funzione.

  • jwplayer("video-container").setup({...}): Qui è dove si inizializza e si configura JW Player.

    • "file": Il percorso del file video.

    • "image": Il percorso all'immagine miniatura del video.

    • "width"e "height": imposta le dimensioni del player. Puoi anche usarlo "100%"per un player responsive.

    • "autostart": Imposta questa opzione truese desideri che il video venga riprodotto automaticamente.

    • "controls": Impostalo su falsese vuoi nascondere i controlli del lettore.

Grazie a questa guida dettagliata, potrai iniziare facilmente a utilizzare JW Player per visualizzare video sul tuo sito web.