JW HTML Config is a standalone JavaScript library which, once loaded on your page, allows you to setup and configure JW Player videos and playlists without the need for JavaScript knowledge.
JW HTML Config uses a simple structure of HTML tags in association with data- attributes to configure both JW5 and JW6 versions seamlessly.
In addition to providing this unified approach to configuring JW Player, the JW HTML Config library includes the following features:
- Makes JW Player act responsively within the body of the page or viewport of a mobile device whilst maintaining the correct aspect ratio
- Resolves common setup and playback issues associated with “Phantom videos” when embedding over the native
videotag - Resolves video/poster sizing issues in JW5 on IE9+ in HTML5 mode
- Allows you to add YouTube videos to JW6 inline playlists and have them play in HTML5 mode (including on iOS) – this original JW5 functionality has been removed from JW6
- Caters for the playlist
listbarin JW6 to be positioned to theleftortopof the video (HTML5 mode only) – original JW5 functionality which has been removed from JW6
Setup
I’ve tried to keep the setup and configuration as simple as possible. However, if you run into any issues feel free to ping me message on twitter (@jherrieven) and I’ll be happy to help.
Please bear in mind this is a work in progress and as such may not currently cater for the more complex JW Player configurations.
DOCTYPE
At the top of your page make sure the HTML5 doctype is declared:
<!DOCTYPE html>
HTML5 video will not work smoothly in some browsers (IE9 for example) if this declaration is missing.
Include the libraries in the <HEAD>
Include a link to the JW Player and JW HTML Config libraries in the head section of your page:
<!-- JW Player Library -->
<script src="[/path/to/jwplayer]/jwplayer.js"></script>
<!-- JW HTML Config Library -->
<script src="[/path/to/jw-html-config]/jwplayer-html-config.min.js"></script>
Whilst it is recommended to have the JW Player library load in the head section of your page, this may not always be possible – this can therefore be loaded within the body tag.
If including the JW HTML Config library in the body tag also, this should appear after the JW Player library at the bottom of the body tag.
That’s it! You are now ready to use HTML to configure JW Player to ensure consistent playback of your videos.
HTML Configuration
Getting started
For each video you wish to configure with JW Player you simply need to wrap the native video tag in a new settings div as follows:
<div class="jw-settings" id="my_simple_settings">
<video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
<source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4" />
<source src="/videos/webm/big-buck-bunny.webm" type="video/webm" />
</video>
</div>
It is important to note that both the div.jw-settings and video tags have a unique id attribute.
Adding the above code to your page results in the following, responsive, JW Player video being displayed:
Setting up Flash fall-back
Ahem… That is of course unless you are using IE8 or less (due to it not recognising the native video tag) or Firefox (due to my server sending the wrong MIME-TYPE of text/plain for the webm video).
Incidentally, Opera uses the webm version too but isn’t as fussy about the MIME-TYPE being correct.
For academic purposes I’ve deciding to leave the MIME-TYPE as it is, and instead make use of JW Player’s fallback to Flash functionality. Doing this should then enable both IE8 and Firefox to play the mp4 version using the JW Flash player instead.
This is achieved by simply adding a div.jw-modes configuration block inside the div.jw-settings block, as follows:
<div class="jw-settings" id="my_simple_settings_2">
<video id="my_simple_video_2" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
<source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4" />
</video>
<div class="jw-modes">
<div class="jw-mode" data-type="html5"></div>
<div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
</div>
</div>
The inclusion (and order) of each div.jw-mode setting tells JW Player to try and render using the html5 mode first, and failing this fall-back to flash. The flash mode setting also includes a data-src attribute to indicate where the JW Flash Player is located.
NOTE: I removed the webm source from the video tag as Firefox would assume it can play this using the html5 mode, and therefore not actually fall-back to Flash.
Providing a non-Flash fall-back
This will now display JW Player in html5 mode if your browser supports mp4 video playback, and will fall-back to use the JW Flash player if not. But what happens in the scenario where the browser doesn’t support the video type natively and it also doesn’t have the Flash plugin installed?
This is where ideally we would provide a further level of fallback in the form of video download links.
This is easily done by including a div.videoFallback block within the video tag. This block will only be displayed given the scenario that none of the video source types are supported natively (or via Flash) and the Flash plugin is not installed.
<div class="jw-settings" id="my_simple_settings_3">
<video id="my_simple_video_3" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
<source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4" />
<div class="videoFallback">
<strong>Download video</strong>
<p>Please note that in order to view this video you either need a web browser that supports HTML5 video or to ensure both JavaScript and Flash are enabled for your browser.
Alternatively you can use the link below to view the video in your player of choice</p>
<a href="/videos/mp4/big-buck-bunny.mp4">MP4 version</a>
</div>
</video>
<div class="jw-modes">
<div class="jw-mode" data-type="html5"></div>
<div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
</div>
</div>
Whilst the fallback HTML should consist of a div with the class set to videoFallback, the contents of this div can be customised to suit your needs.
Using the download fall-back instead of the video tag
One final configuration approach I want to explore in this Getting started section is the concept of using the fallback block and download links as the actual source settings for JW Player setup – eliminating the use of a video tag.
Whilst this would mean there is no longer the potential to play a video in the native browser player – in the case where JavaScript is disabled – it does provide a more consistent experience for users across all devices, reduces potential page load time, eliminates buffering clashes and overcomes any restrictions on CMS’s allowing users to include video tags inline.
This basically involves replacing the video tag with a div.jw-video settings block which contains replacements for the source tags in the form of a.jw-source links. This can be seen in action below:
<div class="jw-settings" id="my_simple_settings_3">
<div class="jw-video" id="my_simple_video_3" data-poster="/posters/big-buck-bunny-preview.jpg">
<strong>Download video</strong>
<p>Please note that in order to view this video you need to ensure JavaScript (and possibly Flash) is enabled for your browser.
Alternatively you can use the link below to download and view the video in your player of choice</p>
<a class="jw-source" href="/videos/mp4/big-buck-bunny.mp4" data-type="video/mp4">MP4 version</a>
</div>
<div class="jw-modes">
<div class="jw-mode" data-type="html5"></div>
<div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
</div>
</div>
Results in the following output:
Please note that in order to view this video you need to ensure JavaScript (and possibly Flash) is enabled for your browser.
Alternatively you can use the links below to download and view the video in your player of choice.