{"id":627,"date":"2014-01-22T23:50:50","date_gmt":"2014-01-22T23:50:50","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?p=627"},"modified":"2014-04-10T14:22:40","modified_gmt":"2014-04-10T13:22:40","slug":"key-drive-for-jw-player-adding-keyboard-controls-to-online-video","status":"publish","type":"post","link":"https:\/\/powered-by-haiku.co.uk\/?p=627","title":{"rendered":"Key Drive for JW Player: Adding keyboard controls to online video"},"content":{"rendered":"<h2>About Key Drive for JW Player<\/h2>\n<p>The aim of Key Drive for JW Player is to provide full keyboard navigation and control of JW Player media in a bid to make online video\/audio more accessible.<\/p>\n<p>Inclusive design features of Key Drive include:<\/p>\n<ul>\n<li>Quick interaction through either Tab\/Enter key navigation or through common Short-cut keys.<\/li>\n<li>Skip links included at the top of the page to quickly enable and access Key Drive.<\/li>\n<li>Skip links included to wrap the original video player &#8211; allowing Flash or poorly labelled players to be jumped over.<\/li>\n<li>Reasonable screen reader support.<\/li>\n<\/ul>\n<h3>Screen reader support<\/h3>\n<p>The following screen readers have been used to assist with the development of Key Drive, with mixed results:<\/p>\n<ul>\n<li>NVDA &#8211; Good results on Firefox and IE. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused NVDA to stop working with it.<\/li>\n<li>VoiceOver &#8211; Good results &#8211; on OS X.<\/li>\n<li>ChromeVox &#8211; Good results &#8211; on Chrome only.<\/li>\n<li>Window Eyes &#8211; Good results on Firefox and IE. There was an issue with it only announcing the first part of a link in Google Chrome. The latest update to Google Chrome [Version 32.0.1700.76 m] has caused Window Eyes to stop working with it completely.<\/li>\n<li>JAWS &#8211; Good results on Firefox and IE. Doesn&#8217;t work at all with Google Chrome.<\/li>\n<\/ul>\n<div class=\"jw6-update\">\n<p>It appears that NVDA and Window Eyes will actually work with Chrome &#8211; provided ChromeVox has been installed, enabled and then disabled first!<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Implementing Key Drive<\/h3>\n<p>Key Drive for JW Player is a simple JavaScript library which can be loaded as part of the web page design &#8211; and hence would be available to all visitors to the page, or can be applied dynamically to the page on a user needs basis &#8211; by creating a bookmarklet.<\/p>\n<p>Because Key Drive is a 3rd party library which makes use of the JW Player Application Programming Interface (API), it is compatible across all versions retrospectively and going forward (provided the API supports the functionality).<\/p>\n<p>This means you will not be limited to a particular version of JW Player or the JW Team&#8217;s &#8220;interpretation&#8221; of how accessibility should be implemented (when they get round to addressing it).<\/p>\n<h3>Looking forward<\/h3>\n<p>Although the specific implementations of rich media support varies quite a bit across browsers and devices, JavaScript support is universally pretty consistent.<\/p>\n<p>Using a similar approach to that taken in developing Key Drive for JW Player, I aim to produce a toolkit of accessibility &#8220;aids&#8221; which can easily be applied to any web page &#8211; with consistency, and independently of the original design or functionality.<\/p>\n<p>Any comments or thoughts regarding this approach would be welcome. You can contact me <a href=\"http:\/\/twitter.com\/jherrieven\">@jherrieven<\/a> on twitter.<\/p>\n<h2>Try it yourself<\/h2>\n<p>You can use Key Drive for JW Player to manage any video on this site by either typing <code>?<\/code><code>j<\/code><code>w<\/code> or by accessing the link via the <code>tab<\/code> key.<\/p>\n<h3>Add it to your site<\/h3>\n<p>Adding Key Drive to your site is as simple as including a link to the Key Drive library in your page &lt;HEAD&gt; <strong>after the jwplayer.js<\/strong> library, for example:<\/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;!-- Key Drive for JW Player --&gt;<br \/>\n&lt;script src=\"\/\/www.dev.powered-by-haiku.co.uk\/jw-html-config\/keydrive\/keydrive.min.js?no-splash\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>By including the <code>?no-splash<\/code> query string as part of the loading URL you can make Key Drive load without displaying the initial dialog.<\/p>\n<h3>Load it as a Bookmarklet<\/h3>\n<p>A bookmarklet is simply a bookmark stored on your web browser favourites bar (or in the bookmarks folder) that contains JavaScript to dynamically extend the currently loaded page. You can load Key Drive this way by visiting any page with a JW Player on it, and after the page has loaded, copy and paste the following code into your browser URL bar and press return:<\/p>\n<p><code class=\"code-block\">javascript:(function(){h=document.getElementsByTagName('head')[0];s=document.createElement('script');s.src='\/\/www.dev.powered-by-haiku.co.uk\/jw-html-config\/keydrive\/keydrive.min.js';h.appendChild(s);void 0;})();<br \/>\n<\/code><\/p>\n<p>\nNOTE: Ensure the <code>javascript:<\/code> part is included &#8211; Chrome tends to remove it after you paste into the URL bar.\n<\/p>\n<div class=\"jw-settings\" id=\"my_settings\" data-skin=\"six\">\n<div class=\"jw-video\" id=\"my_video\" controls poster=\"\" preload=\"none\">\n<div class=\"videoFallback\">\n<strong>Download video<\/strong><br \/>\n<a class=\"jw-source\" href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/ampm_music-1.mp4\" data-type=\"video\/mp4\" data-bitrate=\"508\" data-width=\"640\">MP4 version<\/a>\n<\/div>\n<\/div>\n<div class=\"jw-playlist\" data-position=\"bottom\" data-size=\"150\">\n<h4>Video Playlist<\/h4>\n<hr \/>\n<div class=\"jw-data\">\n<p><strong><a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/ampm_music-1.mp4\" data-src-video-mp4-_sd=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/ampm_music-1.mp4\" data-src-video-mp4-640-508=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/ampm_music-1.mp4\" data-image=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/ampm.jpg\" data-title=\"Punnany Massif\" data-duration=\"366\" data-description=\"P\u00c9CS AKTU\u00c1L X - OFFICIAL HD VIDEO (c) Punnany Massif &#038; AM:PM Music\" data-transcript2=\"\/ny_file.pdf (123 Mb)\" data-captions=\"\">Punnany Massif Link<\/a><\/strong>\n<\/p>\n<\/div>\n<hr \/>\n<div class=\"jw-data\">\n<p><strong><a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/Mahesh%20Vinayakram-1.mp4\" data-src-video-mp4-320-888=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/videos\/mp4\/Mahesh%20Vinayakram-1.mp4\" data-image=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/dub_fx.jpg\" data-title=\"No Rest For The Wicked\" data-duration=\"426\" data-description=\"Dub FX featuring CAde and Mahesh Vinayakram\" data-transcript2=\"\/mc_file.pdf (456 Kb)\" data-captions=\"\">No Rest For The Wicked<\/a><\/strong>\n            <\/p>\n<\/p><\/div>\n<hr \/>\n<div class=\"jw-data\">\n<p><strong><a href=\"http:\/\/www.youtube.com\/watch?v=ShbC5yVqOdI\" data-src-video-youtube=\"http:\/\/www.youtube.com\/watch?v=ShbC5yVqOdI\" data-image=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/posters\/danny_macaskill.jpg\" data-title=\"Danny Macaskill - Industrial Revolutions (YouTube)\" data-duration=\"296\" data-description=\"Industrial Revolutions\" data-captions=\"\" data-youtube=\"jw5\">Danny Macaskill &#8211; Industrial Revolutions<\/a><\/strong>\n            <\/p>\n<\/p><\/div>\n<hr \/><\/div>\n<div class=\"jw-modes\">\n<div class=\"jw-mode\" data-type=\"html5\"><\/div>\n<div class=\"jw-mode\" data-type=\"flash\"><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>About Key Drive for JW Player The aim of Key Drive for JW Player is to provide full keyboard navigation and control of JW Player media in a bid to make online video\/audio more accessible. Inclusive design features of Key Drive include: Quick interaction through either Tab\/Enter key navigation or through common Short-cut keys. Skip&hellip; <a href=\"https:\/\/powered-by-haiku.co.uk\/?p=627\">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":[11,10],"tags":[],"class_list":["post-627","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-jw-player"],"_links":{"self":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=627"}],"version-history":[{"count":25,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/627\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/627\/revisions\/699"}],"wp:attachment":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}