Merge pull request #55 from Selz/develop

Seek improvements

controls.md

@@ -22,6 +22,8 @@ This is the default `html` option from `plyr.js`.
 ```javascript
 ["<div class='player-controls'>",
     "<div class='player-progress'>",
+        "<label for='seek{id}' class='sr-only'>Seek</label>",
+        "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
         "<progress class='player-progress-played' max='100' value='0'>",
             "<span>0</span>% played",
         "</progress>",
@@ -36,7 +38,7 @@ This is the default `html` option from `plyr.js`.
         "</button>",
         "<button type='button' data-player='rewind'>",
             "<svg><use xlink:href='#icon-rewind'></use></svg>",
-            "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
+            "<span class='sr-only'>Rewind {seektime} seconds</span>",
         "</button>",
         "<button type='button' data-player='play'>",
             "<svg><use xlink:href='#icon-play'></use></svg>",
@@ -48,7 +50,7 @@ This is the default `html` option from `plyr.js`.
         "</button>",
         "<button type='button' data-player='fast-forward'>",
             "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-            "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
+            "<span class='sr-only'>Fast forward {seektime} seconds</span>",
         "</button>",
         "<span class='player-time'>",
             "<span class='sr-only'>Time</span>",

docs/dist/templates.js

@@ -1,2 +1,2 @@
     var templates = {};
-    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("	<div class=\"player-progress\">");t.b("\n" + i);t.b("		<progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% played");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("		<progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% buffered");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("	</div>");t.b("\n" + i);t.b("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<span class=\"player-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("		</span>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("	<span class=\"player-controls-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("		<input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("			<svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("	<div class=\"player-progress\">");t.b("\n" + i);t.b("		<label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b("		<input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b("		<progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% played");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("		<progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% buffered");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("	</div>");t.b("\n" + i);t.b("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Rewind {seektime} seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Fast forward {seektime} seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<span class=\"player-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("		</span>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("	<span class=\"player-controls-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("		<input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("			<svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});

docs/src/templates/controls.html

@@ -1,5 +1,7 @@
 <div class="player-controls">
 	<div class="player-progress">
+		<label for="seek{id}" class="sr-only">Seek</label>
+		<input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">
 		<progress class="player-progress-played" max="100" value="0">
 			<span>0</span>% played
 		</progress>
@@ -14,7 +16,7 @@
 		</button>
 		<button type="button" data-player="rewind">
 			<svg><use xlink:href="#icon-rewind"></use></svg>
-			<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
+			<span class="sr-only">Rewind {seektime} seconds</span>
 		</button>
 		<button type="button" data-player="play">
 			<svg><use xlink:href="#icon-play"></use></svg>
@@ -26,7 +28,7 @@
 		</button>
 		<button type="button" data-player="fast-forward">
 			<svg><use xlink:href="#icon-fast-forward"></use></svg>
-			<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
+			<span class="sr-only">Fast forward {seektime} seconds</span>
 		</button>
 		<span class="player-time">
 			<span class="sr-only">Time</span>
@@ -42,7 +44,7 @@
 		</label>
 
 		<label for="volume{id}" class="sr-only">Volume</label>
-		<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
+		<input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
 
 		<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
 		<label for="captions{id}">

notes.md

@@ -0,0 +1,9 @@
+Loading
+--------------
+http://stackoverflow.com/questions/8685038/tell-whether-video-is-loaded-or-not-in-javascript
+http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready
+
+Events
+--------------
+https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
+https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

readme.md

@@ -19,14 +19,18 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
 - **No dependencies** - written in vanilla JavaScript, no jQuery required. 
 
+Oh and yes, it works with Bootstrap. 
+
 ## Changelog
 Check out [the changelog](changelog.md)
 
 ## Planned development
 - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
-- Accept a selector for the `html` template property.
 - Multiple language captions (with selection)
-- Localisation of control labels 
+- Playlists (audio and video)
+- Set source by API
+- Tooltip option (for seeking and controls)
+... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
 
 If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
 
@@ -263,6 +267,11 @@ Here's a list of the methods supported:
     <td>Number</td>
     <td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
   </tr>
+  <tr>
+    <td><code>seek</code></td>
+    <td>Number</td>
+    <td>Seeks the media to the provided parameter, time in seconds.</td>
+  </tr>
   <tr>
     <td><code>setVolume</code></td>
     <td>Number</td>
@@ -346,6 +355,9 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s
 - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
 - [HTML5 Weekly #177](http://html5weekly.com/issues/177)
 - [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+- [Hacker News](https://news.ycombinator.com/item?id=9136774)
+- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
+- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
 
 ## Used by
 - [Selz.com](https://selz.com)
@@ -356,6 +368,7 @@ Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the abo
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
 - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
 - The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made
+- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
 
 Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)

src/js/plyr.js

@@ -24,6 +24,7 @@
             container:          ".player",
             controls:           ".player-controls",
             buttons: {
+                seek:           "[data-player='seek']",
                 play:           "[data-player='play']",
                 pause:          "[data-player='pause']",
                 restart:        "[data-player='restart']",
@@ -40,8 +41,7 @@
                 played:         ".player-progress-played"
             },
             captions:           ".player-captions",
-            duration:           ".player-duration",
+            duration:           ".player-duration"
-            seekTime:           ".player-seek-time"
         },
         classes: {
             video:              "player-video",
@@ -70,64 +70,68 @@
             enabled:            true
         },
         html: (function() {
-                return ["<div class='player-controls'>",
+            return [
-                "<div class='player-progress'>",
+                "<div class='player-controls'>",
-                    "<progress class='player-progress-played' max='100' value='0'>",
+                    "<div class='player-progress'>",
-                        "<span>0</span>% played",
+                        "<label for='seek{id}' class='sr-only'>Seek</label>",
-                    "</progress>",
+                        "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
-                    "<progress class='player-progress-buffer' max='100' value='0'>",
+                        "<progress class='player-progress-played' max='100' value='0'>",
-                        "<span>0</span>% buffered",
+                            "<span>0</span>% played",
-                    "</progress>",
+                        "</progress>",
-                "</div>",
+                        "<progress class='player-progress-buffer' max='100' value='0'>",
-                "<span class='player-controls-playback'>",
+                            "<span>0</span>% buffered",
-                    "<button type='button' data-player='restart'>",
+                        "</progress>",
-                        "<svg><use xlink:href='#icon-restart'></use></svg>",
+                    "</div>",
-                        "<span class='sr-only'>Restart</span>",
+                    "<span class='player-controls-playback'>",
-                    "</button>",
+                        "<button type='button' data-player='restart'>",
-                    "<button type='button' data-player='rewind'>",
+                            "<svg><use xlink:href='#icon-restart'></use></svg>",
-                        "<svg><use xlink:href='#icon-rewind'></use></svg>",
+                            "<span class='sr-only'>Restart</span>",
-                        "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
+                        "</button>",
-                    "</button>",
+                        "<button type='button' data-player='rewind'>",
-                    "<button type='button' data-player='play'>",
+                            "<svg><use xlink:href='#icon-rewind'></use></svg>",
-                        "<svg><use xlink:href='#icon-play'></use></svg>",
+                            "<span class='sr-only'>Rewind {seektime} seconds</span>",
-                        "<span class='sr-only'>Play</span>",
+                        "</button>",
-                    "</button>",
+                        "<button type='button' data-player='play'>",
-                    "<button type='button' data-player='pause'>",
+                            "<svg><use xlink:href='#icon-play'></use></svg>",
-                        "<svg><use xlink:href='#icon-pause'></use></svg>",
+                            "<span class='sr-only'>Play</span>",
-                        "<span class='sr-only'>Pause</span>",
+                        "</button>",
-                    "</button>",
+                        "<button type='button' data-player='pause'>",
-                    "<button type='button' data-player='fast-forward'>",
+                            "<svg><use xlink:href='#icon-pause'></use></svg>",
-                        "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+                            "<span class='sr-only'>Pause</span>",
-                        "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
+                        "</button>",
-                    "</button>",
+                        "<button type='button' data-player='fast-forward'>",
-                    "<span class='player-time'>",
+                            "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-                        "<span class='sr-only'>Time</span>",
+                            "<span class='sr-only'>Fast forward {seektime} seconds</span>",
-                        "<span class='player-duration'>00:00</span>",
+                        "</button>",
+                        "<span class='player-time'>",
+                            "<span class='sr-only'>Time</span>",
+                            "<span class='player-duration'>00:00</span>",
+                        "</span>",
                     "</span>",
-                "</span>",
+                    "<span class='player-controls-sound'>",
-                "<span class='player-controls-sound'>",
+                        "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
-                    "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+                        "<label id='mute{id}' for='mute{id}'>",
-                    "<label id='mute{id}' for='mute{id}'>",
+                            "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
-                        "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+                            "<svg><use xlink:href='#icon-volume'></use></svg>",
-                        "<svg><use xlink:href='#icon-volume'></use></svg>",
+                            "<span class='sr-only'>Toggle Mute</span>",
-                        "<span class='sr-only'>Toggle Mute</span>",
+                        "</label>",
-                    "</label>",
+                        "<label for='volume{id}' class='sr-only'>Volume</label>",
-                    "<label for='volume{id}' class='sr-only'>Volume</label>",
+                        "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
-                    "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
+                        "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
-                    "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
+                        "<label for='captions{id}'>",
-                    "<label for='captions{id}'>",
+                            "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
-                        "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
+                            "<svg><use xlink:href='#icon-captions-off'></use></svg>",
-                        "<svg><use xlink:href='#icon-captions-off'></use></svg>",
+                            "<span class='sr-only'>Toggle Captions</span>",
-                        "<span class='sr-only'>Toggle Captions</span>",
+                        "</label>",
-                    "</label>",
+                        "<button type='button' data-player='fullscreen'>",
-                    "<button type='button' data-player='fullscreen'>",
+                            "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
-                        "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
+                            "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
-                        "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
+                            "<span class='sr-only'>Toggle fullscreen</span>",
-                        "<span class='sr-only'>Toggle fullscreen</span>",
+                        "</button>",
-                    "</button>",
+                    "</span>",
-                "</span>",
+                "</div>"
-            "</div>"].join("\n");
+            ].join("\n");
-        })()
+    })()
     };
 
     // Debugging
@@ -272,34 +276,7 @@
 
     // Get percentage
     function _getPercentage(current, max) {
-        return Math.floor((current / max) * 100);
+        return ((current / max) * 100).toFixed(2);
-    }
-
-    // Get click position relative to parent
-    // http://www.kirupa.com/html5/getting_mouse_click_position.htm
-    function _getClickPosition(event) {
-        var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
-        return {
-            x: event.clientX - parentPosition.x,
-            y: event.clientY - parentPosition.y
-        };
-    }
-    // Get element position
-    function _getPosition(element) {
-        var xPosition = 0;
-        var yPosition = 0;
-
-        while (element) {
-            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
-            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
-            element = element.offsetParent;
-        }
-        
-        return { 
-            x: xPosition, 
-            y: yPosition 
-        };
     }
 
     // Deep extend/merge two Objects
@@ -509,6 +486,7 @@
 
                 // Buttons
                 player.buttons = {};
+                player.buttons.seek             = _getElement(config.selectors.buttons.seek);
                 player.buttons.play             = _getElement(config.selectors.buttons.play);
                 player.buttons.pause            = _getElement(config.selectors.buttons.pause);
                 player.buttons.restart          = _getElement(config.selectors.buttons.restart);
@@ -757,13 +735,6 @@
             }
         }
 
-        // Setup seeking
-        function _setupSeeking() {
-            // Update number of seconds in rewind and fast forward buttons
-            player.seekTime[0].innerHTML = config.seekTime;
-            player.seekTime[1].innerHTML = config.seekTime;
-        }
-
         // Setup fullscreen
         function _setupFullscreen() {
             if(player.type === "video" && config.fullscreen.enabled) {
@@ -812,19 +783,7 @@
             if(typeof seekTime !== "number") {
                 seekTime = config.seekTime;
             }
-
+            _seek(player.media.currentTime - seekTime);
-            var targetTime = player.media.currentTime - seekTime;
-
-            if (targetTime < 0) {
-                player.media.currentTime = 0;
-            }
-            else {
-                player.media.currentTime = targetTime;
-            }
-            // Special handling for "manual" captions
-            if (!player.isTextTracks && player.type === "video") {
-                _adjustManualCaptions(player);
-            }
         }
 
         // Fast forward
@@ -833,15 +792,35 @@
             if(typeof seekTime !== "number") {
                 seekTime = config.seekTime;
             }
+            _seek(player.media.currentTime + seekTime);
+        }
 
-            var targetTime = player.media.currentTime + seekTime;
+        // Seek to time
+        var _seek = function(input) {
+            //var value = config.seekTime;
+            var targetTime = 0;
 
-            if (targetTime > player.media.duration) {
+            // If no event or time is passed, bail
-                player.media.currentTime = player.media.duration;
+            if (typeof input === "undefined") {
+                return;
             }
-            else {
+            // Explicit position
-                player.media.currentTime = targetTime;
+            else if (typeof input === "number") {
+                targetTime = input;
             }
+            // Event
+            else if (input.type === "change" || input.type === "input") {
+                // It's the seek slider
+                // Seek to the selected time
+                targetTime = ((this.value / this.max) * player.media.duration).toFixed(1);
+            }
+
+            // Set the current time
+            player.media.currentTime = targetTime;
+
+            // Logging
+            _log("Seeking to " + player.media.currentTime + " seconds");
+
             // Special handling for "manual" captions
             if (!player.isTextTracks && player.type === "video") {
                 _adjustManualCaptions(player);
@@ -970,11 +949,27 @@
             switch(event.type) {
                 // Video playing
                 case "timeupdate":
+                case "seeking":
                     progress    = player.progress.played.bar;
                     text        = player.progress.played.text;
                     value       = _getPercentage(player.media.currentTime, player.media.duration);
+
+                    // Set seek range value only if it's a "natural" time event
+                    if(event.type == "timeupdate") {
+                        player.buttons.seek.value = value;
+                    }
+                    
                     break;
 
+                // Events from seek range
+                case "change":
+                case "input":
+                    progress    = player.progress.played.bar;
+                    text        = player.progress.played.text;
+                    value       = event.target.value;
+                    break;
+
+
                 // Check buffer status
                 case "playing":
                 case "progress":
@@ -996,6 +991,8 @@
                 progress.value = value;
                 text.innerHTML = value;
             }
+
+            //_log(event);
         }
 
         // Update the displayed play time
@@ -1011,6 +1008,13 @@
             player.duration.innerHTML = player.mins + ":" + player.secs;
         }
 
+        function _timeUpdate(event) {
+            // Duration
+            _updateTimeDisplay();
+            // Playing progress
+            _updateProgress(event);
+        }
+
         // Listen for events
         function _listeners() {
             // Play
@@ -1066,22 +1070,11 @@
                 });
             }
             
-            // Duration
+            // Time change on media
-            _on(player.media, "timeupdate", _updateTimeDisplay);
+            _on(player.media, "timeupdate seeking", _timeUpdate);
 
-            // Playing progress
+            // Seek 
-            _on(player.media, "timeupdate", _updateProgress);
+            _on(player.buttons.seek, "change input", _seek);
-
-            // Skip when clicking progress bar
-            _on(player.progress.played.bar, "click", function(event) {
-                player.pos = _getClickPosition(event).x / this.offsetWidth;
-                player.media.currentTime = player.pos * player.media.duration;
-                
-                // Special handling for "manual" captions
-                if (!player.isTextTracks && player.type === "video") {
-                    _adjustManualCaptions(player);
-                }
-            });
 
             // Captions
             _on(player.buttons.captions, "click", function() { 
@@ -1154,9 +1147,6 @@
             // Setup fullscreen
             _setupFullscreen();
 
-            // Seeking
-            _setupSeeking();
-
             // Listeners
             _listeners();
         }
@@ -1170,6 +1160,7 @@
             restart:            _restart,
             rewind:             _rewind,
             forward:            _forward,
+            seek:               _seek,
             setVolume:          _setVolume,
             toggleMute:         _toggleMute,
             toggleCaptions:     _toggleCaptions

src/less/plyr.less

@@ -21,7 +21,6 @@
 @control-bg-hover: 			@blue;
 @control-color: 			@gray-light;
 @control-color-inactive: 	@gray;
-@control-color-focus: 		#fff;
 @control-color-hover: 		#fff;
 
 // Progress
@@ -29,13 +28,13 @@
 @progress-playing-bg: 		@blue;
 @progress-buffered-bg: 		@gray;
 
-// Range
+// Volume
-@range-track-height: 		6px;
+@volume-track-height: 		6px;
-@range-track-bg: 			@gray;
+@volume-track-bg: 			@gray;
-@range-thumb-height: 		(@range-track-height * 2);
+@volume-thumb-height: 		(@volume-track-height * 2);
-@range-thumb-width: 		(@range-track-height * 2);
+@volume-thumb-width: 		(@volume-track-height * 2);
-@range-thumb-bg: 			@control-color;
+@volume-thumb-bg: 			@control-color;
-@range-thumb-bg-focus: 		@control-bg-hover;
+@volume-thumb-bg-focus: 	@control-bg-hover;
 
 // Breakpoints
 @bp-control-split: 			560px; // When controls split into left/right
@@ -64,25 +63,35 @@
 // Tab focus styles
 .tab-focus() {
 	outline: thin dotted #000;
-	outline-offset: 1px;
+	outline-offset: 0;
 }
 
-// Range styling
+// <input type="range"> styling
 // ---------------------------------------
-.range-thumb() {
+.volume-thumb() {
-	height: @range-thumb-height;
+	height: @volume-thumb-height;
-	width: @range-thumb-width;
+	width: @volume-thumb-width;
-	background: @range-thumb-bg;
+	background: @volume-thumb-bg;
 	border: 0;
-	border-radius: (@range-thumb-height / 2);
+	border-radius: (@volume-thumb-height / 2);
 	transition: background .3s ease;
 	cursor: ew-resize;
 }
-.range-track() {
+.volume-track() {
-	height: @range-track-height;
+	height: @volume-track-height;
-	background: @range-track-bg;
+	background: @volume-track-bg;
+	border: 0;
+	border-radius: (@volume-track-height / 2);
+}
+.seek-thumb() {
+	background: transparent;
+	border: 0;
+	width: 2px;
+	height: @control-spacing;
+}
+.seek-track() {
+	background: none;
 	border: 0;
-	border-radius: (@range-track-height / 2);
 }
 
 // Font smoothing
@@ -196,13 +205,13 @@
 				transition: fill .3s ease;
 			}
 		}
-		[type="checkbox"] + label,
+		input + label,
 		.inverted:checked + label {
 			color: @control-color-inactive;
 		}
 		button, 
 		.inverted + label,
-		[type="checkbox"]:checked + label {
+		input:checked + label {
 			color: @control-color;
 		}
 		button {
@@ -210,16 +219,18 @@
 			background: transparent;
 			overflow: hidden;
 		}
-		[type="checkbox"]:focus + label,
+		
-		button:focus {
+		button:focus,
-			.tab-focus();
-			color: @control-color-focus;
-		}
 		button:hover,
-		[type="checkbox"] + label:hover {
+		input:focus + label,
+		input + label:hover {
 			background: @control-bg-hover;
 			color: @control-color-hover;
 		}
+		button:focus,
+		input:focus + label {
+			outline: 0;
+		}
 		.icon-exit-fullscreen,
 		.icon-muted,
 		.icon-captions-on {
@@ -247,44 +258,93 @@
 		height: @control-spacing;
 		background: @progress-bg;
 
-		&-buffer,
+		&-buffer[value],
-		&-played {
+		&-played[value],
+		&-seek[type=range] {
 			position: absolute;
 			left: 0;
 			top: 0;
 			width: 100%;
-			height: 100%;
+			height: @control-spacing;
 			margin: 0;
+			padding: 0;
 			vertical-align: top;
 
-			&[value] {
+			-webkit-appearance: none;
-				-webkit-appearance: none;
+			-moz-appearance: none;
-				border: none;
+			border: none;
+			background: transparent;
+		}
+		&-buffer[value],
+		&-played[value] {	
+			&::-webkit-progress-bar {
 				background: transparent;
+			}
 
-				&::-webkit-progress-bar {
+			// Inherit from currentColor;
-					background: transparent;
+			&::-webkit-progress-value {
-				}
+				background: currentColor;
-
+				transition: width .1s ease;
-				// Inherit from currentColor;
+			}
-				&::-webkit-progress-value {
+			&::-moz-progress-bar {
-					background: currentColor;
+				background: currentColor;
-				}
+				transition: width .1s ease;
-				&::-moz-progress-bar {
-					background: currentColor;
-				}
 			}
 		}
-		&-played {
-			z-index: 2;
-		}
 		&-played[value] {
-			cursor: pointer;
+			z-index: 2;
 			color: @progress-playing-bg;
 		}
 		&-buffer[value] {
 			color: @progress-buffered-bg;
 		}
+
+		// Seek control
+		// <input[type='range']> element
+		// Specificity is for bootstrap compatibility
+		&-seek[type=range] {
+			z-index: 3;
+			cursor: pointer;
+			outline: 0;
+
+			// Webkit
+			&::-webkit-slider-runnable-track {
+				.seek-track();
+			}
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				.seek-thumb();
+			}
+
+			// Mozilla
+			&::-moz-range-track {
+				.seek-track();
+			}
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				.seek-thumb();
+			}
+			
+			// Microsoft
+			&::-ms-track {
+				color: transparent;
+				.seek-track();
+			}
+			&::-ms-fill-lower,
+			&::-ms-fill-upper {
+				.seek-track();
+			}
+			&::-ms-thumb {
+				.seek-thumb();
+			}
+
+			&:focus {
+				outline: 0;
+			}
+			&::-moz-focus-outer {
+				border: 0;
+			}
+		}
 	}
 
 	// States
@@ -312,49 +372,49 @@
 		
 		// Webkit
 		&::-webkit-slider-runnable-track {
-			.range-track();
+			.volume-track();
 		}
 		&::-webkit-slider-thumb {
 			-webkit-appearance: none;
-			margin-top: -((@range-thumb-height - @range-track-height) / 2);
+			margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
-			.range-thumb();
+			.volume-thumb();
 		}
 
 		// Mozilla
 		&::-moz-range-track {
-			.range-track();
+			.volume-track();
 		}
 		&::-moz-range-thumb {
-			.range-thumb();
+			.volume-thumb();
 		}
 		
 		// Microsoft
 		&::-ms-track {
-			height: @range-track-height;
+			height: @volume-track-height;
 			background: transparent;
 			border-color: transparent;
-			border-width: ((@range-thumb-height - @range-track-height) / 2) 0;
+			border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
 			color: transparent;
 		}
 		&::-ms-fill-lower,
 		&::-ms-fill-upper {
-			.range-track();
+			.volume-track();
 		}
 		&::-ms-thumb {
-			.range-thumb();
+			.volume-thumb();
 		}
 
 		&:focus {
 			outline: 0;
 
 			&::-webkit-slider-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 			&::-moz-range-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 			&::-ms-thumb {
-				background: @range-thumb-bg-focus;
+				background: @volume-thumb-bg-focus;
 			}
 		}
 	}

src/sass/plyr.scss

@@ -30,12 +30,12 @@ $progress-playing-bg: 		$blue;
 $progress-buffered-bg: 		$gray;
 
 // Range
-$range-track-height: 		6px;
+$volume-track-height: 		6px;
-$range-track-bg: 			$gray;
+$volume-track-bg: 			$gray;
-$range-thumb-height: 		($range-track-height * 2);
+$volume-thumb-height: 		($volume-track-height * 2);
-$range-thumb-width: 		($range-track-height * 2);
+$volume-thumb-width: 		($volume-track-height * 2);
-$range-thumb-bg: 			$control-color;
+$volume-thumb-bg: 			$control-color;
-$range-thumb-bg-focus: 		$control-bg-hover;
+$volume-thumb-bg-focus: 	$control-bg-hover;
 
 // Breakpoints
 $bp-control-split: 			560px; // When controls split into left/right
@@ -66,27 +66,37 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 @mixin tab-focus()
 {
 	outline: thin dotted #000;
-	outline-offset: 1px;
+	outline-offset: 0;
 }
 
-// Range styling
+// <input type="range"> styling
 // ---------------------------------------
-@mixin range-thumb()
+@mixin volume-thumb()
 {
-	height: $range-thumb-height;
+	height: $volume-thumb-height;
-	width: $range-thumb-width;
+	width: $volume-thumb-width;
-	background: $range-thumb-bg;
+	background: $volume-thumb-bg;
 	border: 0;
-	border-radius: ($range-thumb-height / 2);
+	border-radius: ($volume-thumb-height / 2);
 	transition: background .3s ease;
 	cursor: ew-resize;
 }
-@mixin range-track()
+@mixin volume-track()
 {
-	height: $range-track-height;
+	height: $volume-track-height;
-	background: $range-track-bg;
+	background: $volume-track-bg;
+	border: 0;
+	border-radius: ($volume-track-height / 2);
+}
+@mixin seek-thumb() {
+	background: transparent;
+	border: 0;
+	width: 2px;
+	height: $control-spacing;
+}
+@mixin seek-track() {
+	background: none;
 	border: 0;
-	border-radius: ($range-track-height / 2);
 }
 
 // Font smoothing
@@ -202,13 +212,13 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 				transition: fill .3s ease;
 			}
 		}
-		[type="checkbox"] + label,
+		input + label,
 		.inverted:checked + label {
 			color: $control-color-inactive;
 		}
 		button,
 		.inverted + label,
-		[type="checkbox"]:checked + label {
+		input:checked + label {
 			color: $control-color;
 		}
 		button {
@@ -216,13 +226,13 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			background: transparent;
 			overflow: hidden;
 		}
-		[type="checkbox"]:focus + label,
+		input:focus + label,
 		button:focus {
 			@include tab-focus();
 			color: $control-color-focus;
 		}
 		button:hover,
-		[type="checkbox"] + label:hover {
+		input + label:hover {
 			background: $control-bg-hover;
 			color: $control-color-hover;
 		}
@@ -253,8 +263,9 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		height: $control-spacing;
 		background: $progress-bg;
 
-		&-buffer,
+		&-buffer[value],
-		&-played {
+		&-played[value],
+		&-seek[type=range] {
 			position: absolute;
 			left: 0;
 			top: 0;
@@ -263,34 +274,82 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			margin: 0;
 			vertical-align: top;
 
-			&[value] {
+			-webkit-appearance: none;
-				-webkit-appearance: none;
+			-moz-appearance: none;
-				border: none;
+			border: none;
+			background: transparent;
+		}
+
+		&-buffer[value],
+		&-played[value] {	
+			&::-webkit-progress-bar {
 				background: transparent;
+			}
 
-				&::-webkit-progress-bar {
+			// Inherit from currentColor;
-					background: transparent;
+			&::-webkit-progress-value {
-				}
+				background: currentColor;
-
+				transition: width .1s ease;
-				// Inherit from currentColor;
+			}
-				&::-webkit-progress-value {
+			&::-moz-progress-bar {
-					background: currentColor;
+				background: currentColor;
-				}
+				transition: width .1s ease;
-				&::-moz-progress-bar {
-					background: currentColor;
-				}
 			}
 		}
-		&-played {
-			z-index: 2;
-		}
 		&-played[value] {
-			cursor: pointer;
+			z-index: 2;
 			color: $progress-playing-bg;
 		}
 		&-buffer[value] {
 			color: $progress-buffered-bg;
 		}
+
+		// Seek control
+		// <input[type='range']> element
+		// Specificity is for bootstrap compatibility
+		&-seek[type=range] {
+			z-index: 3;
+			cursor: pointer;
+			outline: 0;
+
+			// Webkit
+			&::-webkit-slider-runnable-track {
+				@include seek-track();
+			}
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				@include seek-thumb();
+			}
+
+			// Mozilla
+			&::-moz-range-track {
+				@include seek-track();
+			}
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				@include seek-thumb();
+			}
+			
+			// Microsoft
+			&::-ms-track {
+				color: transparent;
+				@include seek-track();
+			}
+			&::-ms-fill-lower,
+			&::-ms-fill-upper {
+				@include seek-track();
+			}
+			&::-ms-thumb {
+				@include seek-thumb();
+			}
+
+			&:focus {
+				outline: 0;
+			}
+			&::-moz-focus-outer {
+				border: 0;
+			}
+		}
 	}
 
 	// States
@@ -321,7 +380,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		}
 		&::-webkit-slider-thumb {
 			-webkit-appearance: none;
-			margin-top: -(($range-thumb-height - $range-track-height) / 2);
+			margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
 			@include range-thumb();
 		}
 
@@ -335,10 +394,10 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 
 		// Microsoft
 		&::-ms-track {
-			height: $range-track-height;
+			height: $volume-track-height;
 			background: transparent;
 			border-color: transparent;
-			border-width: (($range-thumb-height - $range-track-height) / 2) 0;
+			border-width: (($volume-thumb-height - $volume-track-height) / 2) 0;
 			color: transparent;
 		}
 		&::-ms-fill-lower,
@@ -353,13 +412,13 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			outline: 0;
 
 			&::-webkit-slider-thumb {
-				background: $range-thumb-bg-focus;
+				background: $volume-thumb-bg-focus;
 			}
 			&::-moz-range-thumb {
-				background: $range-thumb-bg-focus;
+				background: $volume-thumb-bg-focus;
 			}
 			&::-ms-thumb {
-				background: $range-thumb-bg-focus;
+				background: $volume-thumb-bg-focus;
 			}
 		}
 	}