{"id":563,"date":"2013-11-01T12:43:40","date_gmt":"2013-11-01T12:43:40","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?p=563"},"modified":"2016-01-13T16:19:20","modified_gmt":"2016-01-13T16:19:20","slug":"jwtube-making-jwplayer-6-work-with-youtube-in-html5-mode","status":"publish","type":"post","link":"https:\/\/powered-by-haiku.co.uk\/?p=563","title":{"rendered":"jwTube: Making JWPlayer 6 work with YouTube in HTML5 mode"},"content":{"rendered":"<div class=\"jw6-update\" style=\"margin-bottom:1em;\">\n<p><strong>UPDATE:<\/strong> With the recent release of JW6.9 (30th June 2014) the JW Team have fully integrated the YouTube iFrame API into the player. As a result jwTube should not be used with JW6.9+ as the two don&#8217;t play well together!<\/p>\n<\/div>\n<p><strong>With the recent update of Apple&#8217;s iOS to version 7, JW Player implementations that use YouTube as a media format have started to experience issues.<\/strong><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/powered-by-haiku.co.uk\/wp-content\/uploads\/2013\/11\/youtube-issue.png\" alt=\"YouTube issue in JW Player on iOS7\"\/><\/p>\n<p><strong>The main problem is that YouTube videos appear to halve in height &#8211; even though the JW Player container remains the correct height.<\/strong><\/p>\n<div class=\"jw6-update\">\n<p>The JW Player team have <a href=\"http:\/\/www.longtailvideo.com\/support\/forums\/jw-player\/setup-issues-and-embedding\/35374\/ios7-youtube-height-issues-ipad-and-iphone-not-displaying-properly\">acknowledged this to be an issue<\/a>, and have stated that it will be addressed in JW 6.8 &#8211; which is not likely to be available until early 2014.<\/p>\n<p>UPDATE: This has now been resolved in JW6.8 (released 6th Feb 2014), however JW playlists and event hookup in HTML5 mode are still missing.\n<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>In order to fill the void between now and then, I have developed a &#8220;patch&#8221; to resolve this issue.<\/p>\n<p>Whilst I was at it, I also decided to address a few other <em>JW Player 6 + YouTube + HTML5 mode<\/em> annoyances, such as:<\/p>\n<ul>\n<li>Allowing playlists on iOS<\/li>\n<li>Allowing merged\/mixed playlists<\/li>\n<li>Controlling YouTube volume using the JW Player control bar<\/li>\n<li>Exposing YouTube events to JW Player<\/li>\n<li>Support for modern Android devices (since v1.4)<\/li>\n<\/ul>\n<h2>Using jwTube<\/h2>\n<p>The basic implementation is very simple:<\/p>\n<h3>1) Download the jwTube patch.<\/h3>\n<p>You can get the <a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwtube\/jwtube.min.js\">jwTube patch here<\/a>.<\/p>\n<h3>2) Load the patch after JW player<\/h3>\n<p>Include a link to the jwTube patch 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;!-- jwTube patch --&gt;<br \/>\n&lt;script src=\"[\/path\/to\/jwtube]\/jwtube.min.js\"&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<h3>3) Enable jwTube<\/h3>\n<div class=\"jw6-update\">\n<p>If you are using jwTube version 1.4 or greater, then that&#8217;s it &#8211; there is no longer any additional configuration required. jwTube will make use of your existing configuration parameters to build mixed\/merged playlists, and will automatically select the relevant mode for your device\/platform.<\/p>\n<p><a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/examples\/jwtube\/single-file-v14.htm\">Examples of using jwTube v1.4 can be found here.<\/a><\/p>\n<p>NOTE: Dynamically added JW Players still require a call to <code>jwtube.patch(<em>player<\/em>)<\/code> immediately after the <code>.setup({...})<\/code> call, passing the resulting JW instance as the <em>player<\/em> parameter.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>If you are using versions earlier than v1.4 then some additional configuration is required in order to apply the jwTube patch:<\/p>\n<ul>\n<li>Use the <code>\"file\":<\/code> syntax to reference your media &#8211; whether they are individual YouTube videos or a playlist<\/li>\n<li>Include <code>\"type\":jwtube.setType()<\/code> as part of the main setup configuration (for single files) or <strong>for the first playlist item<\/strong> in an inline playlist &#8211; at the same level as the <code>\"file\"<\/code> parameter.\n<ul>\n<li>If you&#8217;d prefer JW Player to only be put into HTML5 mode when on iOS7 &#8211; giving a better default experience for PC users &#8211; use this setting instead: <code>\"type\":(jwtube.iOSVersion()>=7?jwtube.setType():\"youtube\")<\/code><\/li>\n<\/ul>\n<\/li>\n<li><strong>Do not<\/strong> include the <code>\"primary\"<\/code> parameter as part of the main setup configuration<\/li>\n<li>For dynamically added JW Players, call <code>jwtube.patch(<em>player<\/em>)<\/code> immediately after the <code>.setup({...})<\/code> call, passing the resulting JW instance as the <em>player<\/em> parameter<\/li>\n<\/ul>\n<p>More specific <a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/examples\/jwtube\/single-file.htm\">examples of using earlier versions can be found here.<\/a><\/p>\n<h2>Hooking up events<\/h2>\n<p>Once the JW Player has been patched, you can hook into the YouTube &#8220;play&#8221;, &#8220;pause&#8221; and &#8220;buffer&#8221; events using the following approach:<\/p>\n<p><code class=\"code-block\"><br \/>\n\t\t&lt;script type=\"text\/javascript\"&gt;<br \/>\n&nbsp;&nbsp;jwplayer(\"container\").setup({\t\t<br \/>\n&nbsp;&nbsp;&nbsp;&nbsp;\"title\":\"Danny Macaskill - Industrial Revolutions\",<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp;\"description\":\"Industrial Revolutions is the amazing new film from street trials riding star Danny Macaskill. Filmed and edited for Channel 4's documentary Concrete Circus by Stu Thomson from http:\/\/www.CutMedia.com\",<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp;\"image\":\"danny_macaskill.jpg\",<br \/>&nbsp;&nbsp;&nbsp;&nbsp;\"width\": \"50%\",<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp;\"aspectratio\":\"16:9\",<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp;\"file\": \"http:\/\/www.youtube.com\/watch?v=ShbC5yVqOdI\",<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp;<strong>\"type\":jwtube.setType()<\/strong><br \/>\n\t\t   &nbsp;&nbsp;});<br \/>\n\t\t   &nbsp;&nbsp;\/\/ Due to a bug in JW6.7, we have to re-get the player instance<br \/>\n\t\t   &nbsp;&nbsp;var jwp = jwplayer(\"container\");<br \/>\n&nbsp;&nbsp;jwp.ytOnPlay = function(player){<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp; \/\/ YouTube video is playing<br \/>\n \t\t   &nbsp;&nbsp;};<br \/>\t<br \/>\n\t\t   &nbsp;&nbsp;jwp.ytOnPause = function(player){<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp; \/\/ YouTube video is paused<br \/>\n \t\t   &nbsp;&nbsp;};<br \/>\t<br \/>\n\t\t   &nbsp;&nbsp;jwp.ytOnBuffer = function(player){<br \/>\n\t\t   &nbsp;&nbsp;&nbsp;&nbsp; \/\/ YouTube video is buffering<br \/>\n \t\t   &nbsp;&nbsp;};<br \/>\n&lt;\/script&gt;<br \/>\n\t<\/code><\/p>\n<h2>jwTube for WordPress<\/h2>\n<p>In order to get jwTube working with the JW Player WordPress Plugin, I&#8217;ve had to create an alternative patch file.<\/p>\n<p>This needs to be loaded into the HTML Head of your WordPress template.<\/p>\n<p>You can get the <a href=\"http:\/\/dev.powered-by-haiku.co.uk\/jw-html-config\/jwtube\/jwtube4wp.min.js\">jwTube for WordPress patch here<\/a>.<\/p>\n<p>Additionally, you need to include the following tag as part of the JW Plugin shortcode:<\/p>\n<p><code>jwtube=\"powered-by-haiku.co.uk\"<\/code><\/p>\n<p>for example<\/p>\n<p><code>jwplayer mediaid=\"xxx\" jwtube=\"powered-by-haiku.co.uk\"<\/code><\/p>\n<p>results in the following:<\/p>\n<p>[jwplayer mediaid=&#8221;602&#8243; jwtube=&#8221;powered-by-haiku.co.uk&#8221; controlbar=&#8221;true&#8221; test=&#8221;jh&#8221;]<\/p>\n<p>NOTE: I have restricted this to only modify the JW Plugin behavior on iOS7.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE: With the recent release of JW6.9 (30th June 2014) the JW Team have fully integrated the YouTube iFrame API into the player. As a result jwTube should not be used with JW6.9+ as the two don&#8217;t play well together! With the recent update of Apple&#8217;s iOS to version 7, JW Player implementations that use&hellip; <a href=\"https:\/\/powered-by-haiku.co.uk\/?p=563\">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-563","post","type-post","status-publish","format-standard","hentry","category-jw-player"],"_links":{"self":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/563","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=563"}],"version-history":[{"count":46,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/563\/revisions"}],"predecessor-version":[{"id":889,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/563\/revisions\/889"}],"wp:attachment":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}