{"id":189,"date":"2013-03-20T22:18:08","date_gmt":"2013-03-20T22:18:08","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?p=189"},"modified":"2013-04-09T09:25:08","modified_gmt":"2013-04-09T08:25:08","slug":"jw-html-config-a-unified-approach-to-configuring-jw-player-using-html-only","status":"publish","type":"post","link":"http:\/\/powered-by-haiku.co.uk\/?p=189","title":{"rendered":"JW HTML Config: Configures JW Player (5 &#038; 6) using HTML only"},"content":{"rendered":"<p>\n<strong>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.<\/strong>\n<\/p>\n<p>\nJW HTML Config uses a simple structure of HTML tags in association with <code>data-<\/code> attributes to configure <strong>both JW5 and JW6<\/strong> versions seamlessly.\n<\/p>\n<p>\nIn addition to providing this unified approach to configuring JW Player, the JW HTML Config library includes the following features:<\/p>\n<ul>\n<li>Makes JW Player act responsively within the body of the page or viewport of a mobile device whilst maintaining the correct aspect ratio<\/li>\n<li>Resolves common setup and playback issues associated with <a href=\"http:\/\/powered-by-haiku.co.uk\/?p=1\">&#8220;Phantom videos&#8221;<\/a> when embedding over the native <code>video<\/code> tag<\/li>\n<li>Resolves video\/poster sizing issues in JW5 on IE9+ in HTML5 mode<\/li>\n<li>Allows you to add YouTube videos to <em>JW6 inline playlists<\/em> and have them play in HTML5 mode (including on iOS) <strong>&#8211; this original JW5 functionality has been removed from JW6<\/strong><\/li>\n<li>Caters for the playlist <code>listbar<\/code> in JW6 to be positioned to the <code>left<\/code> or <code>top<\/code> of the video (<em>HTML5 mode only<\/em>) <strong>&#8211; original JW5 functionality which has been removed from JW6<\/strong><\/li>\n<\/ul>\n<h2>Setup<\/h2>\n<p>I&#8217;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&#8217;ll be happy to help.<br \/><strong>Please bear in mind this is a work in progress and as such may not currently cater for the more complex JW Player configurations.<\/strong>\n<\/p>\n<h3>DOCTYPE<\/h3>\n<p>\nAt the top of your page make sure the HTML5 doctype is declared:\n<\/p>\n<p><code class=\"code-block\">&lt;!DOCTYPE html&gt;<br \/>\n<\/code><\/p>\n<p>\nHTML5 video will not work smoothly in some browsers (IE9 for example) if this declaration is missing.\n<\/p>\n<h3>Include the libraries in the &lt;HEAD&gt;<\/h3>\n<p>\nInclude a link to the JW Player and JW HTML Config libraries in the <code>head<\/code> section of your page:\n<\/p>\n<p><code class=\"code-block\">&lt;!-- JW Player Library --&gt;<br \/>\n&lt;script src=\"[\/path\/to\/jwplayer]\/jwplayer.js\"&gt;&lt;\/script&gt;<br \/>\n&lt;!-- JW HTML Config Library --&gt;<br \/>\n&lt;script src=\"[\/path\/to\/jw-html-config]\/jwplayer-html-config.min.js\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>\nWhilst it is recommended to have the JW Player library load in the <code>head<\/code> section of your page, this may not always be possible &#8211; this can therefore be loaded within the <code>body<\/code> tag.\n<\/p>\n<p>\nIf including the JW HTML Config library in the <code>body<\/code> tag also, this should appear after the JW Player library at the bottom of the <code>body<\/code> tag.\n<\/p>\n<p>\nThat&#8217;s it! You are now ready to use HTML to configure JW Player to ensure consistent playback of your videos.\n<\/p>\n<h2>HTML Configuration<\/h2>\n<h3>Getting started<\/h3>\n<p>\nFor each video you wish to configure with JW Player you simply need to wrap the native <code>video<\/code> tag in a new settings <code>div<\/code> as follows: <\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/webm\/big-buck-bunny.webm\" type=\"video\/webm\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code>\n<\/p>\n<p><strong>It is important to note that both the <code>div.jw-settings<\/code> and <code>video<\/code> tags have a unique <code>id<\/code> attribute.<\/strong><\/p>\n<p>Adding the above code to your page results in the following, responsive, JW Player video being displayed:<\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings\">\n   <video id=\"my_simple_video\" poster=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"><source src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/><source src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/webm\/big-buck-bunny.webm\" type=\"video\/webm\" \/><\/video>\n<\/div>\n<p><\/p>\n<h3>Setting up Flash fall-back<\/h3>\n<p><strong>Ahem&#8230;<\/strong> That is of course unless you are using IE8 or less (due to it not recognising the native <code>video<\/code> tag) or Firefox (due to my server sending the wrong MIME-TYPE of <code>text\/plain<\/code> for the webm video). <br \/>\n<em>Incidentally, Opera uses the webm version too but isn&#8217;t as fussy about the MIME-TYPE being correct.<\/em>\n<\/p>\n<p>For academic purposes I&#8217;ve deciding to leave the MIME-TYPE as it is, and instead make use of JW Player&#8217;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.<\/p>\n<p>This is achieved by simply adding a <code>div.jw-modes<\/code> configuration block inside the <code>div.jw-settings<\/code> block, as follows:<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings_2\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video_2\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code>\n<\/p>\n<p>\nThe inclusion (and order) of each <code>div.jw-mode<\/code> setting tells JW Player to try and render using the <code>html5<\/code> mode first, and failing this fall-back to <code>flash<\/code>. The flash mode setting also includes a <code>data-src<\/code> attribute to indicate where the JW Flash Player is located.\n<\/p>\n<p>\nNOTE: I removed the webm <code>source<\/code> from the <code>video<\/code> tag as Firefox would assume it can play this using the <code>html5<\/code> mode, and therefore not actually fall-back to Flash.\n<\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings_2\">\n   <video id=\"my_simple_video_2\" poster=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"><source src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<div class=\"jw-modes\">\n<div class=\"jw-mode\" data-type=\"html5\"><\/div>\n<div class=\"jw-mode\" data-type=\"flash\" data-src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwplayer\/v5\/player.swf\"><\/div>\n<\/p><\/div>\n<\/div>\n<h3>Providing a non-Flash fall-back<\/h3>\n<p>\nThis will now display JW Player in <code>html5<\/code> 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&#8217;t support the video type natively and it also doesn&#8217;t have the Flash plugin installed?\n<\/p>\n<p>This is where ideally we would provide a further level of fallback in the form of video download links.<\/p>\n<p>\nThis is easily done by including a <code>div.videoFallback<\/code> block within the <code>video<\/code> 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.\n<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings_3\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=\"my_simple_video_3\" poster=\"\/posters\/big-buck-bunny-preview.jpg\" preload=\"none\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=\"\/videos\/mp4\/big-buck-bunny.mp4\" type=\"video\/mp4\" \/&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"videoFallback\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;Download video&lt;\/strong&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;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. <br \/>Alternatively you can use the link below to view the video in your player of choice&lt;\/p&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=\"\/videos\/mp4\/big-buck-bunny.mp4\"&gt;MP4 version&lt;\/a&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>Whilst the fallback HTML should consist of a <code>div<\/code> with the class set to <code>videoFallback<\/code>, the contents of this <code>div<\/code> can be customised to suit your needs.<\/p>\n<h3>Using the download fall-back instead of the <code>video<\/code> tag<\/h3>\n<p>\nOne final configuration approach I want to explore in this <strong>Getting started<\/strong> section is the concept of using the fallback block and download links as the actual source settings for JW Player setup &#8211; eliminating the use of a <code>video<\/code> tag.\n<\/p>\n<p>\nWhilst this would mean there is no longer the potential to play a video in the native browser player &#8211; in the case where JavaScript is disabled &#8211; 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&#8217;s allowing users to include <code>video<\/code> tags inline.\n<\/p>\n<p>\nThis basically involves replacing the <code>video<\/code> tag with a <code>div.jw-video<\/code> settings block which contains replacements for the <code>source<\/code> tags in the form of <code>a.jw-source<\/code> links. This can be seen in action below:\n<\/p>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings_3\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-video\" id=\"my_simple_video_3\" data-poster=\"\/posters\/big-buck-bunny-preview.jpg\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;Download video&lt;\/strong&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;Please note that in order to view this video you need to ensure JavaScript (and possibly Flash) is enabled for your browser. <br \/>Alternatively you can use the link below to download and view the video in your player of choice&lt;\/p&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;a class=\"jw-source\" href=\"\/videos\/mp4\/big-buck-bunny.mp4\" data-type=\"video\/mp4\"&gt;MP4 version&lt;\/a&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-modes\"&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"html5\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;div class=\"jw-mode\" data-type=\"flash\" data-src=\"\/jwplayer\/v5\/player.swf\"&gt;&lt;\/div&gt;<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p>Results in the following output:<\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings_3\">\n<div class=\"jw-video\" id=\"my_simple_video_3\" data-poster=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/big-buck-bunny-preview.jpg\">\n       <strong>Download video<\/strong><\/p>\n<p>Please note that in order to view this video you need to ensure JavaScript (and possibly Flash) is enabled for your browser.<br \/>\n       <br \/>Alternatively you can use the links below to download and view the video in your player of choice.<\/p>\n<p>       <a class=\"jw-source\" href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/big-buck-bunny.mp4\" data-type=\"video\/mp4\">MP4 version<\/a>\n   <\/div>\n<div class=\"jw-modes\">\n<div class=\"jw-mode\" data-type=\"html5\"><\/div>\n<div class=\"jw-mode\" data-type=\"flash\" data-src=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwplayer\/v5\/player.swf\"><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <a href=\"http:\/\/powered-by-haiku.co.uk\/?p=189\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-189","post","type-post","status-publish","format-standard","hentry","category-jw-player"],"_links":{"self":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=189"}],"version-history":[{"count":48,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions"}],"predecessor-version":[{"id":466,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/189\/revisions\/466"}],"wp:attachment":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=189"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}