DEV Community

Sh Raj
Sh Raj

Posted on

Integrate Jplayer in HTML5 Video Player ▶️

Article under Review

You can integrate JWPlayer 8 into your HTML5 video player using a JavaScript CDN (Content Delivery Network) instead of downloading the library. Here's how you can do it:

  1. Include the JWPlayer library from a CDN:

    • Open your HTML file in a text editor.
    • In the <head> section of your HTML file, add the JWPlayer library by including the JavaScript file from a CDN. Use the following code:
     <script src="https://cdn.jsdelivr.net/jwplayer/8.5.4/jwplayer.js"></script>
    
  2. Add a container for the video player:

    • In your HTML file, create a <div> element to serve as a container for the JWPlayer video player. Give it an id attribute to reference it later, for example:
     <div id="my-video-player"></div>
    
  3. Initialize JWPlayer and configure the player:

    • After the <div> container, add a <script> block to initialize and configure the JWPlayer. This script should be placed before the closing </body> tag.
     <script>
       jwplayer("my-video-player").setup({
         file: "/path/to/video.mp4", // Specify the path to your video file
         // Add additional configuration options as needed
         // For example:
         width: 640,
         height: 360,
       });
     </script>
    
  • Inside the setup() function, you can specify various configuration options for your video player. Refer to the JWPlayer documentation for a comprehensive list of available options and their usage.
  1. Replace /path/to/video.mp4 with the actual path to your video file.

  2. Save the HTML file and open it in a web browser to test the integration of JWPlayer into your HTML5 video player using the JavaScript CDN.

By following these steps and including the JWPlayer library from a CDN, you can integrate JWPlayer 8 into your HTML5 video player without the need to download the library or sign up for an account.

Top comments (0)