Embedding Self Hosted JW Player 6

Getting JW Player 6 up and running is a easy process. To embed a video only Few lines of HTML code are required that works on all popular desktop browsers and mobile devices.

JW6 supports 2 set-up methods: the cloud-hosted and self-hosted JW Player. This blog walks through the necessary steps for a quick set-up of Self-Hosted JW Player

Steps for embedding Jw Player. Open your web page in an HTML editor and:

1: ADD LIBRARY TO "HEAD TAG"

Embed the main JW Player script library into the head of your page.

If you have purchased Premium, Pro, or Ads edition of JW Player, use its features by inserting license key of your Jw Player in a second line, like this:

2: ADD EMBED TO "BODY TAG"

Insert a "div" element in the body of your page with a unique id, at the location you want the player to appear:

	
	
Loading the player ...

Right below it, insert a script that invokes the JW Player setup() call on your page.

The last code block script tells the JW Player library to setup a player instance over the DOM element with ID container. Inside this setup call, a list of options are provided by the script for configuring the player. In this srcipt setup, only the file, image,height and width options has been set, but many more options are available. They are listed below.

CONFIGURATION OPTIONS:

For configuring which media file(s) to load in the player, there are these three options :

file

URL to a single AAC/MP3/Vorbis audio, MP4/FLV/WebM video, HLS/RTMP or YouTube page stream to play.

image

URL to a PNG/JPG poster image to display before playback is started. For audio only media, the poster image remains visible during playback.

title

This shows the title of the media loaded in the player. It is displayed in the middle of the display before playback is started.

LAYOUT OPTIONS

Following are the options for configuring the Jw player layout:

controls

Used to display the video controls (controlbar, icons and dock). It can be true or false (default).

skin

This shows skin to use for player styling. Also If you have purchased JW Player, you can also load one of the 8 premium skins off our CDN by simply inserting the skin name (e.g. skin: "bekle" ).

width

This sets the Width of jw player. Default value is  480 pixels. I recommend setting this to at least 320 pixels, otherwise certain elements of UI may not fit. Also you can set it to "100%" to enable Responsive Design, in combination with the aspectratio option.

aspectratio

This option, used for Responsive Design in JW Player, is set to the video display aspect ratio, for example "16:9". It then automatically scales its height accordingly, when the width of the player changes. Also when the aspectratio is set, the height option is ignored.

height

This set height of the player in pixels. I recommend setting this to at least 180, so all elements of UI will fit. However, it can also be set to a small size (e.g. 40) for audio only playback. Defaults value is 270.

Hope it helps !! :)