{"id":248,"date":"2013-03-21T16:01:58","date_gmt":"2013-03-21T16:01:58","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?page_id=248"},"modified":"2013-04-23T12:21:26","modified_gmt":"2013-04-23T11:21:26","slug":"main-settings","status":"publish","type":"page","link":"http:\/\/powered-by-haiku.co.uk\/?page_id=248","title":{"rendered":"Main settings"},"content":{"rendered":"<p>The following are optional <code>data-<\/code> attributes that can be added to the <code>div.jw-settings<\/code> block in order to configure JW Player.<\/p>\n<ul>\n<li><code>data-skin<\/code>\n<ul>\n<li><strong>JW5<\/strong> &#8211; A URL referencing the player custom skin ZIP or XML file.<\/li>\n<li><strong>JW6<\/strong> &#8211; A URL referencing the player custom skin XML file. Or the name of one of the predefined skins: &#8220;beelden&#8221;, &#8220;bekle&#8221;, &#8220;five&#8221;, &#8220;glow&#8221;, &#8220;modieus&#8221;, &#8220;roundster&#8221;, &#8220;stormtrooper&#8221; or &#8220;vapor&#8221; (<em>for JW6 Premium and Ads only<\/em>).<\/li>\n<li>Please note: The XML format for skins has changed between JW5 and JW6. If you try and load a JW5 skin in JW6 you will get an error.<\/li>\n<\/ul>\n<\/li>\n<li><code>data-responsive<\/code> &#8211; This allows you switch off the responsive behaviour by setting the value to <code>false<\/code>.<\/li>\n<li><code>data-ratio<\/code> &#8211; This allows you to define the aspect ratio of the player. This is <code>16:9<\/code> by default but can be any value given the format &#8220;x:y&#8221; such as <code>4:3<\/code>.<\/li>\n<li><code>data-width<\/code> &#8211; If the responsive option is switched off, this allows you to specify the width of the player. If you include the <code>data-ratio<\/code> setting, you don&#8217;t need to include <code>data-height<\/code>.<\/li>\n<li><code>data-height<\/code> &#8211; If the responsive option is switched off, this allows you to specify the height of the player. If you include the <code>data-ratio<\/code> setting, you don&#8217;t need to include <code>data-width<\/code>.<\/li>\n<\/ul>\n<h3>Example usage<\/h3>\n<p><code class=\"code-block\">&lt;div class=\"jw-settings\" id=\"my_simple_settings\" data-skin=\"\/haiku\/haiku.xml\" data-responsive=\"false\" data-width=\"300\" data-ratio=\"4:3\"&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; &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><br \/>\nResults in:<\/p>\n<div class=\"jw-settings\" id=\"my_simple_settings\" data-skin=\"\/wp-content\/uploads\/2012\/06\/haiku\/haiku.xml\" data-responsive=\"false\" data-width=\"400\" data-ratio=\"4:3\">\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\" \/><\/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","protected":false},"excerpt":{"rendered":"<p>The following are optional data- attributes that can be added to the div.jw-settings block in order to configure JW Player. data-skin JW5 &#8211; A URL referencing the player custom skin ZIP or XML file. JW6 &#8211; A URL referencing the player custom skin XML file. Or the name of one of the predefined skins: &#8220;beelden&#8221;,&hellip; <a href=\"http:\/\/powered-by-haiku.co.uk\/?page_id=248\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":130,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-248","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=248"}],"version-history":[{"count":21,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/248\/revisions"}],"predecessor-version":[{"id":251,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/248\/revisions\/251"}],"wp:attachment":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}