Loading state handling

Fixes #36
Updated captions
2015-03-08 01:24:23 +11:00 · 2015-03-07 19:39:01 +11:00 · 2015-03-07 19:27:11 +11:00 · 2015-03-07 19:25:25 +11:00 · 2015-03-07 19:24:41 +11:00 · 2015-03-07 19:21:54 +11:00
11 changed files with 383 additions and 150 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,14 @@
 # Changelog
 ## v1.0.23
 - Handling loading states in the UI
 ## v1.0.22
 - Added support() API method for checking mimetype support
 - Added source() API method for setting media source(s)
 - Added poster() API method for setting poster source
 - Refactored captions logic for manual captions
 ## v1.0.21
 - Added an <input type="range"> for seeking to improve experience (and support dragging)
 - Icons for restart and captions improved (and some IDs changed)
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/error.html
+++ b/docs/error.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<!-- Docs styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css">
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
 	</head>
 	<body>
 		<main>
--- a/docs/index.html
+++ b/docs/index.html
@ -8,10 +8,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<!-- Styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css">
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/plyr.css">
 		<!-- Docs styles -->
-		<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css">
+		<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
 	</head>
 	<body>
 		<header>
@ -29,7 +29,7 @@
 						<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 						<!-- Text track file -->
-						<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
+						<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
 						<!-- Fallback for browsers that don't support the <video> element -->
 						<div>
@ -67,13 +67,13 @@
 		<!-- Load SVG defs -->
 		<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
 		<script>
-		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.21/sprite.svg");
+		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.23/sprite.svg");
 		</script>
 		<!-- Plyr core script -->
-		<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
+		<script src="//cdn.plyr.io/1.0.23/plyr.js"></script>
 		<!-- Docs script -->
-		<script src="//cdn.plyr.io/1.0.21/docs.js"></script>
+		<script src="//cdn.plyr.io/1.0.23/docs.js"></script>
 	</body>
 </html>
--- a/notes.md
+++ b/notes.md
@ -1,9 +0,0 @@
 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
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.0.21",
+  "version": "1.0.23",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -3,14 +3,14 @@ A simple, accessible HTML5 media player.
 [Checkout the demo](http://plyr.io)
-[![Image of Plyr](https://cdn.plyr.io/static/plyr.png)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?1)](http://plyr.io)
 ## Why?
 We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
 ## Features
 - **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 5.3KB minified and gzipped.
+- **Lightweight** - just 5.7KB minified and gzipped.
 - **Customisable** - make the player look how you want with the markup you want.
 - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
 - **Responsive** - as you'd expect these days.
@ -38,6 +38,8 @@ If you have any cool ideas or features, please let me know by [creating an issue
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup. 
 **Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.23/plyr.js` to `https://cdn.plyr.io/1.0.23/plyr.js`
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
@ -49,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
 If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
 ```html
-<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css">
+<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/plyr.css">
-<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
+<script src="//cdn.plyr.io/1.0.23/plyr.js"></script>
 ```
-You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.21/sprite.svg`.
+You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.23/sprite.svg`.
 ### CSS
 If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. 
@ -188,13 +190,13 @@ You can pass the following options to the setup method.
    <td><code>click</code></td>
    <td>Boolean</td>
    <td><code>true</code></td>
-    <td>Click (or tap) will toggle pause/play of a `<video>`.</td>
+    <td>Click (or tap) will toggle pause/play of a <code>&lt;video&gt;</code>.</td>
  </tr>
  <tr>
    <td><code>selectors</code></td>
    <td>Object</td>
    <td>&mdash;</td>
-    <td>See `plyr.js` in `/src` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
+    <td>See <code>plyr.js</code> in <code>/src</code> for more info. The only option you might want to change is <code>player</code> which is the hook used for Plyr, the default is <code>.player</code>.</td>
  </tr>
  <tr>
    <td><code>classes</code></td>
@ -206,13 +208,13 @@ You can pass the following options to the setup method.
    <td><code>captions</code></td>
    <td>Object</td>
    <td>&mdash;</td>
-    <td>This currently contains one property `defaultActive` which toggles if captions should be on by default. The default value is `false`.</td>
+    <td>This currently contains one property `defaultActive` which toggles if captions should be on by default. The default value is <code>false</code>.</td>
  </tr>
  <tr>
    <td><code>fullscreen</code></td>
    <td>Object</td>
    <td>&mdash;</td>
-    <td>This currently contains two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a 'full window' view for older browsers. The default value is `true`.</td>
+    <td>This currently contains two properties;<code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td>
  </tr>
  <tr>
    <td><code>storage</code></td>
@ -243,50 +245,75 @@ Here's a list of the methods supported:
  </thead>
  <tbody>
  <tr>
-    <td><code>play</code></td>
+    <td><code>play()</code></td>
    <td>&mdash;</td>
    <td>Plays the media</td>
  </tr>
  <tr>
-    <td><code>pause</code></td>
+    <td><code>pause()</code></td>
    <td>&mdash;</td>
    <td>Pauses the media</td>
  </tr>
    <tr>
-    <td><code>restart</code></td>
+    <td><code>restart()</code></td>
    <td>&mdash;</td>
    <td>Restarts playback</td>
  </tr>
  <tr>
-    <td><code>rewind</code></td>
+    <td><code>rewind(...)</code></td>
    <td>Number</td>
    <td>Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
  </tr>
  <tr>
-    <td><code>forward</code></td>
+    <td><code>forward(...)</code></td>
    <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><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><code>setVolume(...)</code></td>
    <td>Number</td>
    <td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
  </tr>
  <tr>
-    <td><code>toggleMute</code></td>
+    <td><code>toggleMute()</code></td>
    <td>&mdash;</td>
    <td>Toggles mute for the player.</td>
  </tr>
  <tr>
-    <td><code>toggleCaptions</code></td>
+    <td><code>toggleCaptions()</code></td>
    <td>&mdash;</td>
    <td>Toggles whether captions are enabled.</td>
  </tr>
  <tr>
    <td><code>support(...)</code></td>
    <td>String</td>
    <td>Determine if a player supports a certain MIME type.</td>
  </tr>
  <tr>
    <td><code>source(...)</code></td>
    <td>String or Array</td>
    <td>
      Set the media source.
      <br><br> 
      <strong>string</strong><br>
      <code>.source("/path/to/video.mp4")</code><br>
      This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
      <br><br>
      <strong>array</strong><br>
      <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
      This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. 
    </td>
  </tr>
    <tr>
    <td><code>poster(...)</code></td>
    <td>String</td>
    <td>Set the poster url. This is supported for the <code>video</code> element only.</td>
  </tr>
 </tbody>
 </table>
@ -322,19 +349,21 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
  </thead>
  <tbody>
    <tr>
      <td>✔&sup1;</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
-      <td>✔</td>
+      <td>✖&sup2;</td>
-      <td>✖&sup1;</td>
+      <td>✔&sup3;</td>
      <td>✔&sup2;</td>
    </tr>
  </tbody>
 </table>
-&sup1; Native player used (no support for `<progress>` or `<input type="range">`)
+&sup1; iPhone forces the native player for `<video>` so no customisation possible
-&sup2; IE10 has no native fullscreen support, fallback can be used (see options)
+&sup2; Native player used (no support for `<progress>` or `<input type="range">`)
 &sup3; IE10 has no native fullscreen support, fallback can be used (see options)
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use: 
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.0.21
+// plyr.js v1.0.23
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -50,6 +50,7 @@
            stopped:            "stopped",
            playing:            "playing",
            muted:              "muted",
            loading:            "loading",
            captions: {
                enabled:        "captions-enabled",
                active:         "captions-active"
@ -142,7 +143,7 @@
    }
    // Credits: http://paypal.github.io/accessible-html5-video-player/
-    // Unfortunately, due to scattered support, browser sniffing is required
+    // Unfortunately, due to mixed support, UA sniffing is required
    function _browserSniff() {
        var nAgt = navigator.userAgent,
            browserName = navigator.appName,
@ -205,6 +206,36 @@
        return [browserName, majorVersion];
    }
    // Check for mime type support against a player instance
    // Credits: http://diveintohtml5.info/everything.html 
    // Related: http://www.leanbackplayer.com/test/h5mt.html
    function _support(player, mimeType) {    
        var media = player.media;
        // Only check video types for video players
        if(player.type == "video") {
            // Check type
            switch(mimeType) {
                case "video/webm":   return !!(media.canPlayType && media.canPlayType("video/webm; codecs=\"vp8, vorbis\"").replace(/no/, ""));
                case "video/mp4":    return !!(media.canPlayType && media.canPlayType("video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"").replace(/no/, ""));
                case "video/ogg":    return !!(media.canPlayType && media.canPlayType("video/ogg; codecs=\"theora\"").replace(/no/, ""));
            }
        }
        // Only check audio types for audio players
        else if(player.type == "audio") {
            // Check type
            switch(mimeType) {
                case "audio/mpeg":   return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, ""));
                case "audio/ogg":    return !!(media.canPlayType && media.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/no/, ""));
                case "audio/wav":    return !!(media.canPlayType && media.canPlayType("audio/wav; codecs=\"1\"").replace(/no/, ""));
            }
        }        
        // If we got this far, we're stuffed
        return false;
    }
    // Replace all
    function _replaceAll(string, find, replace) {
        return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
@ -242,6 +273,23 @@
        }
    }
    // Remove an element
    function _remove(element) {
        element.parentNode.removeChild(element);
    }
    // Prepend child
    function _prependChild(parent, element) {
        parent.insertBefore(element, parent.firstChild);
    }
    // Set attributes
    function _setAttributes(element, attributes) {
        for(var key in attributes) {
            element.setAttribute(key, attributes[key]);
        }
    }
    // Toggle class on an element
    function _toggleClass(element, name, state) {
        if(element){
@ -276,6 +324,9 @@
    // Get percentage
    function _getPercentage(current, max) {
        if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
            return 0;
        }
        return ((current / max) * 100).toFixed(2);
    }
@ -392,19 +443,43 @@
        player.container = container;
        // Captions functions
-        // Credits: http://paypal.github.io/accessible-html5-video-player/
+        // Seek the manual caption time and update UI
        function _seekManualCaptions(time) {
            // If it's not video, or we're using textTracks, bail.
            if (player.usingTextTracks || player.type !== "video") {
                return;
            }
-        // For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
+            // Reset subcount
        function _adjustManualCaptions() {
            player.subcount = 0;
-            while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
+
            // Check time is a number, if not use currentTime
            // IE has a bug where currentTime doesn't go to 0
            // https://twitter.com/Sam_Potts/status/573715746506731521
            time = typeof time === "number" ? time : player.media.currentTime;
            while (_timecodeMax(player.captions[player.subcount][0]) < time.toFixed(1)) {
                player.subcount++;
                if (player.subcount > player.captions.length-1) {
                    player.subcount = player.captions.length-1;
                    break;
                }
            }
            // Check if the next caption is in the current time range
            if (player.media.currentTime.toFixed(1) >= _timecodeMin(player.captions[player.subcount][0]) && 
                player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) {
                    player.currentCaption = player.captions[player.subcount][1];
                // Render the caption
                player.captionsContainer.innerHTML = player.currentCaption;
            }
            else {
                // Clear the caption
                player.captionsContainer.innerHTML = "";
            }
        }
        // Display captions container and button (for initialization)
        function _showCaptions() {
            _toggleClass(player.container, config.classes.captions.enabled, true);
@ -414,6 +489,7 @@
                player.buttons.captions.setAttribute("checked", "checked");
            }
        }
        // Utilities for caption time codes
        function _timecodeMin(tc) {
            var tcpair = [];
@ -551,7 +627,7 @@
            player.media.removeAttribute("controls");
            // Set media type
-            player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
+            player.type = (player.media.tagName == "VIDEO" ? "video" : "audio");
            // Add type class
            _toggleClass(player.container, config.classes[player.type], true);
@ -571,6 +647,11 @@
                // Cache the container
                player.videoContainer = wrapper;
            }
            // Autoplay
            if(player.media.getAttribute("autoplay") !== null) {
                _play();
            }
        }
        // Setup captions
@ -583,9 +664,9 @@
                player.captionsContainer = _getElement(config.selectors.captions);
                // Determine if HTML5 textTracks is supported
-                player.isTextTracks = false;
+                player.usingTextTracks = false;
                if (player.media.textTracks) {
-                    player.isTextTracks = true;
+                    player.usingTextTracks = true;
                }
                // Get URL of caption file if exists
@ -637,12 +718,12 @@
                        _log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
                        // Set to false so skips to "manual" captioning
-                        player.isTextTracks = false;
+                        player.usingTextTracks = false;
                    }
                    // Rendering caption tracks
                    // Native support required - http://caniuse.com/webvtt
-                    if (player.isTextTracks) {
+                    if (player.usingTextTracks) {
                        _log("TextTracks supported.");
                        for (var y=0; y < tracks.length; y++) {
@ -665,24 +746,8 @@
                        // Render captions from array at appropriate time
                        player.currentCaption = "";
                        player.subcount = 0;
                        player.captions = [];
                        _on(player.media, "timeupdate", function() {
                            // Check if the next caption is in the current time range
                            if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && 
                                player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) {
                                    player.currentCaption = player.captions[player.subcount][1];
                            }
                            // Is there a next timecode?
                            if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && 
                                player.subcount < (player.captions.length-1)) {
                                    player.subcount++;
                            }
                            // Render the caption
                            player.captionsContainer.innerHTML = player.currentCaption;
                        });
                        if (captionSrc !== "") {
                            // Create XMLHttpRequest Object
                            var xhr = new XMLHttpRequest();
@ -763,20 +828,6 @@
            player.media.pause();
        }
        // Restart playback
        function _restart() {
            // Move to beginning
            player.media.currentTime = 0;
            // Special handling for "manual" captions
            if (!player.isTextTracks) {
                player.subcount = 0;
            }
            // Play and ensure the play button is in correct state
            _play();
        }
        // Rewind
        function _rewind(seekTime) {
            // Use default if needed
@ -796,35 +847,37 @@
        }
        // Seek to time
-        var _seek = function(input) {
+        // The input parameter can be an event or a number
-            //var value = config.seekTime;
+        function _seek(input) {
            var targetTime = 0;
            // If no event or time is passed, bail
            if (typeof input === "undefined") {
                return;
            }
            // Explicit position
-            else if (typeof input === "number") {
+            if (typeof input === "number") {
                targetTime = input;
            }
            // Event
-            else if (input.type === "change" || input.type === "input") {
+            else if (typeof input === "object" && (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);
+                targetTime = ((input.target.value / input.target.max) * player.media.duration);
            }
            // Normalise targetTime
            if (targetTime < 0) {
                targetTime = 0;
            }
            else if (targetTime > player.media.duration) {
                targetTime = player.media.duration;
            }
            // Set the current time
-            player.media.currentTime = targetTime;
+            player.media.currentTime = targetTime.toFixed(1);
            // Logging
            _log("Seeking to " + player.media.currentTime + " seconds");
            // Special handling for "manual" captions
-            if (!player.isTextTracks && player.type === "video") {
+            _seekManualCaptions(targetTime);
                _adjustManualCaptions(player);
            }
        }
        // Check playing state
@ -942,16 +995,30 @@
            _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
        }
        // Check if media is loading
        function _checkLoading(event) {
            var loading = (event.type === "waiting");
            // Clear timer
            clearTimeout(player.loadingTimer);
            // Timer to prevent flicker when seeking
            player.loadingTimer = setTimeout(function() {
                _toggleClass(player.container, config.classes.loading, loading);
            }, (loading ? 250 : 0));
        }
        // Update <progress> elements
        function _updateProgress(event) {
-            var progress, text, value = 0;
+            var progress    = player.progress.played.bar, 
                text        = player.progress.played.text, 
                value       = 0;
            if(event) {
                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
@ -964,8 +1031,6 @@
                    // Events from seek range
                    case "change":
                    case "input":
                    progress    = player.progress.played.bar;
                    text        = player.progress.played.text;
                        value = event.target.value;
                        break;
@ -986,13 +1051,11 @@
                                    })();
                        break;
                }
            if (progress && value > 0) {
                progress.value = value;
                text.innerHTML = value;
            }
-            //_log(event);
+            // Set values
            progress.value = value;
            text.innerHTML = value;
        }
        // Update the displayed play time
@ -1008,13 +1071,92 @@
            player.duration.innerHTML = player.mins + ":" + player.secs;
        }
        // Handle time change event
        function _timeUpdate(event) {
            // Duration
            _updateTimeDisplay();
            // Playing progress
            _updateProgress(event);
        }
        // Remove <source> children and src attribute
        function _removeSources() {
            // Find child <source> elements
            var sources = player.media.querySelectorAll("source");
            // Remove each
            for (var i = sources.length - 1; i >= 0; i--) {
                _remove(sources[i]);
            }
            // Remove src attribute
            player.media.removeAttribute("src");
        }
        // Inject a source
        function _addSource(attributes) {
            if(attributes.src) {
                // Create a new <source>
                var element = document.createElement("source");
                // Set all passed attributes
                _setAttributes(element, attributes);
                // Inject the new source
                _prependChild(player.media, element);
            }
        }
        // Update source
        // Sources are not checked for support so be careful
        function _parseSource(sources) {
            // Pause playback (webkit freaks out)
            _pause();
            // Restart
            _seek();
            // Update the UI
            _checkPlaying();
            // Remove current sources
            _removeSources();
            // If a single source is passed
            // .source("path/to/video.mp4")
            if(typeof sources === "string") {
                player.media.setAttribute("src", sources);
            }
            // An array of source objects
            // Check if a source exists, use that or set the "src" attribute?
            // .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }])
            else if (sources.constructor === Array) {
                for (var index in sources) { 
                    _addSource(sources[index]);
                }
            }
            // Reset time display
            _timeUpdate();
            // Re-load sources
            player.media.load();
            // Play if autoplay attribute is present
            if(player.media.getAttribute("autoplay") !== null) {
                _play();
            }
        }
        // Update poster
        function _updatePoster(source) {
            if(player.type === "video") {
                player.media.setAttribute("poster", source);
            }
        }
        // Listen for events
        function _listeners() {
            // Play
@ -1030,7 +1172,7 @@
            });
            // Restart
-            _on(player.buttons.restart, "click", _restart);
+            _on(player.buttons.restart, "click", _seek);
            // Rewind
            _on(player.buttons.rewind, "click", _rewind);
@ -1062,7 +1204,8 @@
                        _play();
                    }
                    else if(player.media.ended) {
-                        _restart();
+                        _seek();
                        _play();
                    }
                    else {
                        _pause();
@ -1073,6 +1216,9 @@
            // Time change on media
            _on(player.media, "timeupdate seeking", _timeUpdate);
            // Update manual captions
            _on(player.media, "timeupdate", _seekManualCaptions);
            // Seek 
            _on(player.buttons.seek, "change input", _seek);
@ -1100,6 +1246,9 @@
            // Handle native play/pause
            _on(player.media, "play pause", _checkPlaying);
            // Loading
            _on(player.media, "waiting canplay seeked", _checkLoading);
        }
        function _init() {
@ -1157,13 +1306,16 @@
            media:              player.media,
            play:               _play,
            pause:              _pause,
-            restart:            _restart,
+            restart:            _seek,
            rewind:             _rewind,
            forward:            _forward,
            seek:               _seek,
            setVolume:          _setVolume,
            toggleMute:         _toggleMute,
-            toggleCaptions:     _toggleCaptions
+            toggleCaptions:     _toggleCaptions,
            source:             _parseSource,
            poster:             _updatePoster,
            support:            function(mimeType) { return _support(player, mimeType); }
        }
    }
@ -1186,6 +1338,13 @@
            // Get the current element
            var element = elements[i];
            // Disabled for <video> for iPhone
            // Since it doesn't allow customisation
            if (element.querySelectorAll("audio, video")[0].tagName === "VIDEO" 
                && /iPhone/i.test(navigator.userAgent)) {
                continue;
            }
            // Setup a player instance and add to the element
            if(typeof element.plyr === "undefined") { 
                element.plyr = new Plyr(element);
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -27,6 +27,8 @@
@progress-bg: 				lighten(@gray, 10%);
@progress-playing-bg: 		@blue;
@progress-buffered-bg: 		@gray;
@progress-loading-size: 	40px;
@progress-loading-bg: 		rgba(0,0,0, .15);
 // Volume
@volume-track-height: 		6px;
@ -59,13 +61,18 @@
 	&:after { content: ""; display: table; }
 	&:after { clear: both; }
 }
 // Tab focus styles
 .tab-focus() {
 	outline: thin dotted #000;
 	outline-offset: 0;
 }
 // Animation
 // ---------------------------------------
@keyframes progress {
 	to { background-position: @progress-loading-size 0; }
 }
 // <input type="range"> styling
 // ---------------------------------------
 .volume-thumb() {
@ -86,7 +93,7 @@
 .seek-thumb() {
 	background: transparent;
 	border: 0;
-	width: 2px;
+	width: (@control-spacing * 2);
 	height: @control-spacing;
 }
 .seek-track() {
@ -284,11 +291,9 @@
 			// Inherit from currentColor;
 			&::-webkit-progress-value {
 				background: currentColor;
 				transition: width .1s ease;
 			}
 			&::-moz-progress-bar {
 				background: currentColor;
 				transition: width .1s ease;
 			}
 		}
 		&-played[value] {
@ -347,6 +352,24 @@
 		}
 	}
 	// Loading state
 	&.loading .player-progress-buffer {
 		animation: progress 1s linear infinite;
 		background-size: @progress-loading-size @progress-loading-size;
 		background-repeat: repeat-x;
 		background-color: @progress-buffered-bg;
 		background-image: linear-gradient(
 			-45deg, 
 			@progress-loading-bg 25%, 
 			transparent 25%, 
 			transparent 50%, 
 			@progress-loading-bg 50%, 
 			@progress-loading-bg 75%,
 			transparent 75%, 
 			transparent);
 	    color: transparent;
 	}
 	// States
 	&-controls [data-player='pause'],
 	&.playing .player-controls [data-player='play'] {
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -21,13 +21,14 @@ $controls-bg: 				$gray-dark;
 $control-bg-hover: 			$blue;
 $control-color: 			$gray-light;
 $control-color-inactive: 	$gray;
 $control-color-focus: 		#fff;
 $control-color-hover: 		#fff;
 // Progress
 $progress-bg: 				lighten($gray, 10%);
 $progress-playing-bg: 		$blue;
 $progress-buffered-bg: 		$gray;
 $progress-loading-size: 	40px;
 $progress-loading-bg: 		rgba(0,0,0, .15);
 // Range
 $volume-track-height: 		6px;
@ -61,7 +62,6 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 	&:after { content: ""; display: table; }
 	&:after { clear: both; }
 }
 // Tab focus styles
@mixin tab-focus()
 {
@ -69,6 +69,12 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 	outline-offset: 0;
 }
 // Animation
 // ---------------------------------------
@keyframes progress {
 	to { background-position: @progress-loading-size 0; }
 }
 // <input type="range"> styling
 // ---------------------------------------
@mixin volume-thumb()
@ -91,7 +97,7 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
@mixin seek-thumb() {
 	background: transparent;
 	border: 0;
-	width: 2px;
+	width: ($control-spacing * 2);
 	height: $control-spacing;
 }
@mixin seek-track() {
@ -289,11 +295,9 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 			// Inherit from currentColor;
 			&::-webkit-progress-value {
 				background: currentColor;
 				transition: width .1s ease;
 			}
 			&::-moz-progress-bar {
 				background: currentColor;
 				transition: width .1s ease;
 			}
 		}
 		&-played[value] {
@ -352,6 +356,24 @@ $bp-captions-large: 		768px; // When captions jump to the larger font size
 		}
 	}
 	// Loading state
 	&.loading .player-progress-buffer {
 		animation: progress 1s linear infinite;
 		background-size: $progress-loading-size $progress-loading-size;
 		background-repeat: repeat-x;
 		background-color: $progress-buffered-bg;
 		background-image: linear-gradient(
 			-45deg, 
 			$progress-loading-bg 25%, 
 			transparent 25%, 
 			transparent 50%, 
 			$progress-loading-bg 50%, 
 			$progress-loading-bg 75%,
 			transparent 75%, 
 			transparent);
 	    color: transparent;
 	}
 	// States
 	&-controls [data-player='pause'],
 	&.playing .player-controls [data-player='play'] {
Author	SHA1	Message	Date
Sam Potts	5370fc5c83	Loading state handling Fixes #36	2015-03-08 01:24:23 +11:00
Sam Potts	8482a1a320	Updated captions	2015-03-07 19:39:01 +11:00
Sam Potts	f3603ac3fa	Size updated	2015-03-07 19:27:11 +11:00
Sam Potts	44fe647a49	Typo	2015-03-07 19:25:25 +11:00
Sam Potts	928a89e599	More formatting	2015-03-07 19:24:41 +11:00
Sam Potts	80d6d806c4	Formatting	2015-03-07 19:21:54 +11:00
Sam Potts	aeecf40191	Slight tweaks	2015-03-07 19:17:57 +11:00
Sam Potts	f368ed572d	source(), poster() and supports() API methods	2015-03-07 19:12:56 +11:00
Sam Potts	5291bf616e	More work on source change	2015-03-07 12:24:07 +11:00
Sam Potts	a00407a475	Removed extra log	2015-03-06 17:47:08 +11:00
Sam Potts	4f47ec49b1	Work on source update and caption fixes	2015-03-06 17:46:06 +11:00
Sam Potts	c48afb7880	Merge remote-tracking branch 'origin/master' into develop	2015-03-06 12:21:51 +11:00
Sam Potts	5d3fb359b8	Note about demo code	2015-03-06 12:20:47 +11:00
Sam Potts	0227dfa7d8	Working on source() api method	2015-03-06 01:51:12 +11:00
Sam Potts	b9915b4b94	Removed notes	2015-03-06 01:50:37 +11:00
Sam Potts	f4c1313c19	Updated screenshot	2015-03-05 23:36:45 +11:00
Sam Potts	7681d63876	Removed progress transition as it feels laggy	2015-03-05 23:27:53 +11:00