JW Player is the most popular media player similar like Adobe flash player which you can use it on your website for Video and Audio play back. Luckily it’s capable of streaming videos on all devices and supports any browsers. Besides all, its quite easy to configure & customize it on website which can ease our video publishing work with less effort. What’s more? Doesn’t it what we asked for our website? Forget about the complexities, just follow these simple instructions to embed video player on your website and surprise your users all the time by streaming best in class videos.
Configure JW Player Using JavaScript API
I don’t want to load you with too much information so i will jump straight into the concept. The major and significant reason of using this Javascript API is that it doesn’t require us to write separate API for both HTML5 and Flash API. Yes! instead you can use the same API on multiple platforms so it’s even easy for us to get it done across all the platforms.
JW Player API
Mostly we use “get” method for getting information so the returned information can be array or object or string.
It will return the following results,
- JW Player play list Array item with jwplayer().getPlaylists().
- Video duration with jwpalyer().getDuration().
- Playback of current video player status jwplayer().getState().
- Pixel dimension of JW Player with jwplayer().getHeight(), jwplayer.getWidth().
Related: How To Integrate Rails Application With Sentry – Rails Error Tracking
JW Player API Setting
By passing the value as a parameter, this setting will helps us to control the player. For example:
file: /home/allan/Desktop/video.mp3, width:100%
How To Call API with Parameter
| Listener Event | Description |
| on(‘event’) | This continuously listen event on a specified player, if we delete the player we need to re initiate. |
| off(‘event’) | This stop listening on a particular event. |
| once(‘event’) | It triggers single event until it setup again when player is delete. |
| trigger(‘event’) | Firing event to a listener it replaces dispatch Event in jw6 |
The event will get triggered when the volume is changed as you can see below,
jwplayer().on('volume', function(e) {
alert ("You Changed Volume"+ e.volume);
});
Using JW Player API Embed Video Player
Below code show how to embed sample video player.
<div id='myElement'>Loading the player...</div>
<script type='text/javascript'>
jwplayer("myElement").setup({
"file": "/uploads/example.mp4",
"image": "/uploads/example.jpg"
});
</script>
We have completed the JW player setup and our API call will immediately fetch the video player to the specified web page. And this video player will use the player instance to play the video.
<script>
jwplayer("myElement").on('complete', function(){
alert("Complete fired - Your content has completed!");
});
</script>
<a href="javascript:jwplayer('myElement').play();">Toggle playback</a>
<a href="javascript:alert('volume: ' + jwplayer('myElement').getVolume());">Report volume</a>
How Can We Implement Multiple Player On the Web Page?
Ok guys, so far we have seen the implementing process of single player on web page. Now let’s see how we can implement multiple players on our web page. Yes, we can able to implement multiple players on our web page and by using unique id we can able to interact with the particular player too, Below code shows how to implement multiple players on the web.
<div id='myFirstPlayer'>Loading the first player...</div>
<div id='mySecondPlayer'>Loading the player...</div>
<script type='text/javascript'>
jwplayer("myFirstPlayer").setup({
"file": "/uploads/example.mp4",
"image": "/uploads/example.jpg"
});
jwplayer("mySecondPlayer").setup({
"file": "/uploads/example2.mp4",
"image": "/uploads/example2.jpg"
});
</script>
Include id of the player
// ID references the first player
jwplayer("myFirstPlayer").play();
Best To Read: How to make Angular Application SEO Friendly Using Pre Render
How To Overcome The Contradiction Between JW Player And Require Js
Basically, JW player will not support Require Js because Require Js uses it’s namespace, so to avoid this issue we must load the jwplayer.js before loading require.js file.
The code is like below.
<script src='jwplayer.js'> <script src='requirejs.js'>
Output
Now you can see the result on my screen,
Successfully we have embedded the video player into the website and it’s your turn now. Start implementing it and rock your customers with powerful streaming videos. Also let us know your valuable feedback’s on the comment section.
Want to explore more about Technologies? Join us on the excursion of exploring Technologies subscribe us to get more blogs & updates on latest technologies. Agira Technologies one of the fastest growing Web and Mobile Development Company in India. Precisely, extends its research on Web technologies, Mobile Apps, Blockchain, Chatbot, Artificial Intelligence, iOT and lot more. Explore more about us on www.agiratech.com.
For any inquiries reach us at info@agiratech.com
