Title: How to Add JWPlayer to HTML5 Video Player
Plays everywhere, every time.
Live on over 2 million sites with 1.3 billion unique plays per month, JW Player is the solution for seamless video playback across browsers and media types. It empowers the developer to interact with video programmatically to create unique and awesome user experiences.
Disclaimer
This is the non-commercial version of JW Player. It does not contain the same features as the commercial-use player available from jwplayer.com. Commercial use and access to features requires a license. Learn more at https://www.jwplayer.com/pricing/. If you are a paid customer and want a player, please download it from the "Downloads" section of your JW Dashboard.
Official Documentation
A Simple Example
The example below will render a video player into the div with the player id, listens to an event, and makes a few calls using the API.
<!DOCTYPE html>
<…Introduction:
JWPlayer is a popular and feature-rich video player that can be easily integrated into HTML5 web pages. With JWPlayer, you can enhance the playback experience of your videos by adding customizable controls, captions, advertising, and more. In this article, we'll walk you through the steps of adding JWPlayer to your HTML5 video player.
Step 1: Include JWPlayer Library:
To get started, you need to include the JWPlayer library in your HTML file. JWPlayer provides a JavaScript library that you can host on your server or use the CDN (Content Delivery Network) option. Here's an example of including the JWPlayer library using the CDN:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JWPlayer Example</title>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/SH20RAJ/DrivePlyr@main/assets/jwplayer.js'></script>
</head>
<body>
<!-- Your video player HTML code here -->
</body>
</html>
Step 2: Create a Video Player Element:
Next, you need to create an HTML element that will serve as the container for your video player. You can use a <div> element with a unique ID to target it in JavaScript. Here's an example:
<div id='myElement'>Loading the player...</div>
Step 3: Initialize JWPlayer:
After creating the video player element, you can initialize JWPlayer using JavaScript. In the setup() method, you specify the configuration options for your video player, such as the video file URL, dimensions, and any additional settings you want to customize. Here's an example of initializing JWPlayer:
<script type='text/javascript'>
jwplayer('myElement').setup({
file: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4',
image: 'https://sh20raj.github.io/Sopplayer/sample.png',
width: 640,
height: 360
});
</script>
In the above example, we set the video file URL to 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4', specified an image to display as the poster for the video using the 'image' option, and set the width and height of the player to 640 and 360 pixels, respectively.
Step 4: Customize Your Video Player:
JWPlayer provides various customization options to enhance the functionality and appearance of your video player. You can explore the JWPlayer documentation to learn more about available options and how to use them.
Conclusion:
By following these steps, you can easily add JWPlayer to your HTML5 video player and leverage its powerful features to enhance the playback experience of your videos. Remember to include the JWPlayer library, create a video player element, initialize JWPlayer with the desired configuration, and customize your player as needed. With JWPlayer, you can create a seamless and interactive video playback experience on your website.
Here is the full HTML Example :-
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JW5</title>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/SH20RAJ/DrivePlyr@main/assets/jwplayer.js'></script>
</head>
<body>
<div id='myElement'>Loading the player...</div>
<script type='text/javascript'>
jwplayer('myElement').setup({
file: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4',
image: 'https://sh20raj.github.io/Sopplayer/sample.png',
width: 640,
height: 360
});
</script>
</body>
</html>
Note: Make sure to replace the video file URL and image URL in the code examples with your own video file and image URLs.
Top comments (0)