close

How to Use JW Player: Embed and Configure Videos

What is JW Player?

JW Player is a powerful and flexible tool for playing videos on your website. This guide will provide a detailed walkthrough on how to use it, including how to get the library using a CDN or by downloading it.

How to Get the JW Player Library

You have two options for getting the JW Player library: using a CDN or downloading it for local hosting.

1. Using a CDN (Recommended)

Using a CDN (Content Delivery Network) is the simplest and fastest way to integrate JW Player. A CDN helps load the files faster because they are hosted on multiple servers around the world.

To use the CDN, simply add the following line of code to the <head> section of your website. Note: You need to replace <YOUR_LICENSE_KEY> with your actual license key.

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

2. Downloading and Hosting Locally

If you want full control over the files and don't want to rely on a network connection, you can download JW Player and host it on your own server.

  1. Go to the official JW Player website.

  2. Sign up or log in to your account (a free trial is available).

  3. Find and download the library from your account dashboard.

  4. Unzip the file and upload the folder to your server.

Detailed Guide to Using JW Player

Once you have the library, you can start embedding JW Player into your website.

1. Create an HTML File and Embed JW Player

Here is a complete HTML example. If you're using the CDN, replace the <script src="..."> line with the CDN code mentioned above. If you're using the downloaded library, make sure the path to the jwplayer.js file is 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. Detailed Explanation of the Code

  • <script src="...">: This line links the JW Player library to your website.

  • <div id="video-container"></div>: This is where the video will be displayed. You can give it any id you want, but make sure it matches the name used in the jwplayer() function.

  • jwplayer("video-container").setup({...}): This is where you initialize and configure JW Player.

    • "file": The path to your video file.

    • "image": The path to the video thumbnail image.

    • "width" and "height": Sets the dimensions for the player. You can also use "100%" for a responsive player.

    • "autostart": Set to true if you want the video to play automatically.

    • "controls": Set to false if you want to hide the player controls.

With this detailed guide, you can easily start using JW Player to display videos on your website.