How to Add HLS Streaming to WordPress Using JW Player

HTTP Live Streaming (HLS) is the latest in streaming technology widely accepted as the standard for fast streaming. It’s a permanent replacement for Adobe Flash. Adobe Flash’s critical vulnerabilities allowing an attacker to gain control of a remote machine was the final blow to its dominance in the market, and now other streaming standards with better security have been introduced, including HLS. JW Player developers created software that can be used in WordPress (or other web platforms) to play HLS video.

Using a Plugin

Before you decide to use HLS, just know that there are other streaming technologies that you can use in your applications. Another option is MPEG-DASH, which is the main HLS competitor currently. Each technology has its advantages and disadvantages, but this article assumes that you’ve decided to use HLS and keep it as a standard for your blog. The one consideration that you should remember is that the technology that you choose should be supported by main browsers on the market.

If you just want video streaming on your site, JW Player published a WordPress plugin that can be used to easily integrate it into your WordPress blog. This plugin is convenient for users who don’t have any coding skills and want to just add HLS video streaming without any customizations.

You can download the JW Player plugin from the WordPress plugin page, or you can download and install it directly from the “Plugins” section of your WordPress dashboard. You’ll need an account and an API key and secret that can be entered in the settings page. The available options for video streaming can be found on the JW Player plugin reference web page.

Adding JW Player Support in Your Own Plugins

For developers that want to add JW Player support in their own plugin code, you can create an instance of the JW Player object and use it to play video in a web page.  The following Ajax code is an example of creating a JW Player instance and streaming an mp4 file in the user’s browser.

var jw = jwplayer("myElement");

playerInstance.setup({

playlist: [{

image: "/assets/videoPic.jpg",

sources: [{

file: "/assets/videoFile.mp4"

}]

}],

file: "http://yoursite.com/videoFile.mp4",

height: 550,

width: 550,

primary: "html5"

image: "/assets/HlsImage.jpg",

hlslabels:{

"2500":"High",

"1000":"Medium"

}

}); 

In the code above, an instance of the JW Player is created and the file “videoFile.mp4” is loaded into the HLS player. You can use the API reference to find the right settings and preferences for your own JW Player object when you decide to integrate streaming into your code.

Notice that you can set different quality settings, a width and height, and an image that will display before the user plays a video. The placeholder image can be one from your video or a custom one.

The JW Player is just one way to add HLS streaming into your WordPress site. The platform is free for beginners who just need 15,000 plays. If you need more, you need to pay a monthly fee.

In addition to a player, you also need a CDN to ensure that speed is never an issue. The JW Player gives you the ability to stream, but it does not ensure speed and performance for users. A CDN coupled with the right technology can turn your blog into a platform where users can easily stream video without frustration from choppy, slow content.

Get the latest in Web Performance
Subscribe now to receive the latest news, tips and tricks in web performance!
The information you provide will be used in accordance with the terms of our privacy policy

No comments

Be the first to post a comment.

Post a comment