{"id":236,"date":"2013-03-21T14:33:27","date_gmt":"2013-03-21T14:33:27","guid":{"rendered":"http:\/\/powered-by-haiku.co.uk\/?page_id=236"},"modified":"2013-04-22T09:45:56","modified_gmt":"2013-04-22T08:45:56","slug":"getting-started-jw5-examples","status":"publish","type":"page","link":"http:\/\/powered-by-haiku.co.uk\/?page_id=236","title":{"rendered":"Getting started | JW5 Examples"},"content":{"rendered":"<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<h2>Setting up Flash fall-back<\/h2>\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<h2>Providing a non-Flash fall-back<\/h2>\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<h2>Using the download fall-back instead of the <code>video<\/code> tag<\/h2>\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>For each video you wish to configure with JW Player you simply need to wrap the native video tag in a new settings div as follows: &lt;div class=&#8221;jw-settings&#8221; id=&#8221;my_simple_settings&#8221;&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;video id=&#8221;my_simple_video&#8221; poster=&#8221;\/posters\/big-buck-bunny-preview.jpg&#8221; preload=&#8221;none&#8221;&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=&#8221;\/videos\/mp4\/big-buck-bunny.mp4&#8243; type=&#8221;video\/mp4&#8243; \/&gt; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;source src=&#8221;\/videos\/webm\/big-buck-bunny.webm&#8221; type=&#8221;video\/webm&#8221; \/&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;\/video&gt; &lt;\/div&gt; It is important to note that&hellip; <a href=\"http:\/\/powered-by-haiku.co.uk\/?page_id=236\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":110,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-236","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/236","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=236"}],"version-history":[{"count":6,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/236\/revisions"}],"predecessor-version":[{"id":496,"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/236\/revisions\/496"}],"wp:attachment":[{"href":"http:\/\/powered-by-haiku.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}