close

Comment utiliser JW Player : Intégrer et configurer des vidéos

Qu'est-ce que JW Player ?

JW Player est un outil puissant et flexible pour lire des vidéos sur votre site web. Ce guide vous expliquera en détail son utilisation, notamment comment accéder à la bibliothèque via un CDN ou par téléchargement.

Comment obtenir la bibliothèque JW Player

Vous avez deux options pour obtenir la bibliothèque JW Player: utiliser un CDN ou la télécharger pour un hébergement local.

1. Utiliser un CDN(recommandé)

Utiliser un CDN(Content Delivery Network) est le moyen le plus simple et le plus rapide d'intégrer JW Player. Un CDN accélère le chargement des fichiers, car ils sont hébergés sur plusieurs serveurs répartis dans le monde.

Pour utiliser le CDN, ajoutez simplement la ligne de code suivante à la <head>section de votre site web. Remarque : vous devez la remplacer <YOUR_LICENSE_KEY>par votre clé de licence.

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

2. Téléchargement et hébergement local

Si vous souhaitez un contrôle total sur les fichiers et ne souhaitez pas dépendre d'une connexion réseau, vous pouvez télécharger JW Player et l'héberger sur votre propre serveur.

  1. Accédez au site officiel de JW Player.

  2. Inscrivez-vous ou connectez-vous à votre compte(un essai gratuit est disponible).

  3. Recherchez et téléchargez la bibliothèque depuis le tableau de bord de votre compte.

  4. Décompressez le fichier et téléchargez le dossier sur votre serveur.

Guide détaillé d'utilisation de JW Player

Une fois que vous disposez de la bibliothèque, vous pouvez commencer à intégrer JW Player dans votre site Web.

1. Créez un fichier HTML et intégrez JW Player

Voici un exemple HTML complet. Si vous utilisez le CDN, remplacez la <script src="...">ligne par le code CDN mentionné ci-dessus. Si vous utilisez la bibliothèque téléchargée, assurez-vous que le chemin d'accès au jwplayer.jsfichier est correct.

<!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. Explication détaillée du code

  • <script src="...">:Cette ligne relie la bibliothèque JW Player à votre site Web.

  • <div id="video-container"></div>: C'est ici que la vidéo sera affichée. Vous pouvez lui donner le nom de idvotre choix, mais assurez-vous qu'il correspond au nom utilisé dans la jwplayer()fonction.

  • jwplayer("video-container").setup({...}):C'est ici que vous initialisez et configurez JW Player.

    • "file": Le chemin vers votre fichier vidéo.

    • "image":Le chemin vers l'image miniature de la vidéo.

    • "width"et"height" : définit les dimensions du lecteur. Vous pouvez également l'utiliser "100%"pour un lecteur réactif.

    • "autostart": Réglez sur truesi vous souhaitez que la vidéo soit lue automatiquement.

    • "controls": Définissez cette option falsesi vous souhaitez masquer les commandes du lecteur.

Avec ce guide détaillé, vous pouvez facilement commencer à utiliser JW Player pour afficher des vidéos sur votre site Web.