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: