{"id":469,"date":"2013-04-17T17:11:02","date_gmt":"2013-04-17T16:11:02","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?p=469"},"modified":"2013-09-26T17:25:13","modified_gmt":"2013-09-26T16:25:13","slug":"touchscroll-making-iscroll-work-in-jwplayer-6-playlists","status":"publish","type":"post","link":"https:\/\/powered-by-haiku.co.uk\/?p=469","title":{"rendered":"touchScroll: Making iScroll work in JWPlayer 6 playlists"},"content":{"rendered":"

For those of you who use JW Player with playlists, but are frustrated that a bug in JW6 has broken single finger scrolling on touch devices – I hope you consider this a workable solution.<\/strong><\/p>\n

\nJeroen from LongTail Video<\/a> has indicated that they will be including single-finger scrolling in JW Player 6.5<\/a>, which by all accounts is slated for June 2013, but in the meantime he suggests you stay with JW 5.10.\n<\/p>\n

\n

\nUpdate<\/strong>
\nJW Player 6.5 was released mid-June 2013 – and it still has no support for single finger scrolling of playlists on touch devices.<\/em><\/strong><\/p>\n

Maybe JW 6.6 will finally have it – which is due end-July\/early August…<\/p>\n

Update: September 2013<\/strong>
\nJW Player 6.6 does now support single finger scrolling of playlists on touch devices… however, the implementation is a bit strange.
\nIt’s not a smooth scrolling effect. The playlist seems to scroll the height of the playlist viewport for each finger swipe… Which is fine on small playlists, but a nightmare on larger ones. Oh dear!\n<\/p>\n<\/div>\n

 <\/p>\n

Whilst I’ve written an HTML Configuration library for JW Player<\/a>, which includes a fix for single-finger scrolling<\/em>, I appreciate that this could be considered too much of a deviation from the JavaScript only embed method many people use.<\/p>\n

With this in mind, I’ve extracted the “iScroll bit” into a discreet library which provides single-finger scrolling to JS embedders with a minimum of fuss!<\/p>\n

How to use<\/h2>\n

1) Download the touchScroll library.<\/h3>\n

You can get the touchScroll library here<\/a>.<\/p>\n

2) Load the library after JW player<\/h3>\n

Include a link to the touchScroll library in your page <HEAD> after the jwplayer.js<\/strong> library, for example:<\/p>\n

<!-- JW Player Library -->
\n<script src=\"[\/path\/to\/jwplayer]\/jwplayer.js\"><\/script>
\n<!-- touchScroll Library -->
\n<script src=\"[\/path\/to\/touch-scroll]\/jw6-touchscroll.min.js\"><\/script>
\n<\/code><\/p>\n

Apply touchScroll to your players<\/h3>\n

\nIn order to apply the touchScroll feature, you need to make a call to jwplayer.touchScroll()<\/code>, passing the current player as a variable, but only once the playlist is ready<\/strong>.\n<\/p>\n

\nThis is achieved by attaching an event callback to your JW Player as follows:\n<\/p>\n

var my_player = jwplayer(\"my_id\").setup({...});
\n my_player.onPlaylist(function(){ jwplayer.touchScroll(this); });
\n<\/code><\/p>\n

The touchScroll()<\/code> function takes an optional second argument which is the time to wait (in milliseconds) before trying to hook up touchScroll. This shouldn’t be necessary in the majority of cases, but depending on the number of other events attached to the player you may need to introduce a delay. Half a second delay (500<\/code>) seems to work in the worst case scenarios.<\/p>\n","protected":false},"excerpt":{"rendered":"

For those of you who use JW Player with playlists, but are frustrated that a bug in JW6 has broken single finger scrolling on touch devices – I hope you consider this a workable solution. Jeroen from LongTail Video has indicated that they will be including single-finger scrolling in JW Player 6.5, which by all… Continue reading →<\/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-469","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\/469","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=469"}],"version-history":[{"count":26,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/469\/revisions"}],"predecessor-version":[{"id":562,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/469\/revisions\/562"}],"wp:attachment":[{"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}