Version bump

Broken progress bar styling IE10

.gitignore

@@ -7,3 +7,5 @@ docs/index.dev.html
 *.mp4
 index-dev.html
 notes.txt
+*.vtt
+docs/index.dev.php

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v1.6.4
+- Bug fix for undefined progress bar
+
+## v1.6.3
+- Seek back to 0 for all media on ended
+- Check for HTML5 video on ended reload
+- Update to docs for `showPosterOnEnd` option
+
+## v1.6.2
+- Fix for tooltip displaying when duration is not set (fixes #177)
+- `showPosterOnEnd` option to show poster when HTML5 video ended (fixes #59)
+- Error handler for YouTube (fixes #189)
+- Initial SoundCloud support (fixes #194)
+- Other minor bug fixes
+
+## v1.6.1
+- Tooltip changes for accessibility 
+
 ## v1.6.0
 - New, cleaner, UI:
 	- Controls are now overlaid, maintaining the video's ratio and making sizing easier

gulpfile.js

@@ -214,7 +214,7 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
+    var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
     cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
     semver          = new RegExp("v" + regex, "gi"),
     localpath       = new RegExp("(\.\.\/)?dist", "gi");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.6.0",
+  "version": "1.6.5",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
   "main": "src/js/plyr.js",

readme.md

@@ -40,10 +40,9 @@ If you have any cool ideas or features, please let me know by [creating an issue
 ## Implementation
 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.6.0/plyr.js` to `https://cdn.plyr.io/1.6.0/plyr.js`
+**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.6.5/plyr.js` to `https://cdn.plyr.io/1.6.5/plyr.js`
 
 ### Node Package Manager (NPM)
-[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) 
 
 Using NPM, you can grab Plyr:
 ```
@@ -52,7 +51,6 @@ npm install plyr
 [https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
 
 ### Bower
-[![Bower version](https://badge.fury.io/bo/plyr.svg)](https://badge.fury.io/bo/plyr)
 
 If bower is your thang, you can grab Plyr using:
 ```
@@ -73,11 +71,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.6.5/plyr.css">
-<script src="https://cdn.plyr.io/1.6.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.0/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.5/sprite.svg`.
 
 ### CSS & Styling
 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.scss` file included in `/src` in your build to save a request.
@@ -115,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
 		c.innerHTML = a.responseText;
 		b.insertBefore(c, b.childNodes[0]);
 	};
-})(document, 'https://cdn.plyr.io/1.6.0/sprite.svg');
+})(document, 'https://cdn.plyr.io/1.6.5/sprite.svg');
 </script>
 ```
 
@@ -190,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.6.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.6.5/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -307,6 +305,12 @@ Options must be passed as an object to the `setup()` method as above or as JSON
     <td><code>true</code></td>
     <td>Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.</td>
   </tr>
+  <tr>
+    <td><code>showPosterOnEnd</code></td>
+    <td>Boolean</td>
+    <td><code>false</code></td>
+    <td>This will restore and *reload* HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution.</td>
+  </tr>
   <tr>
     <td><code>tooltips</code></td>
     <td>Object</td>

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.6.0
+// plyr.js v1.6.5
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -42,6 +42,7 @@
         iconUrl:                '',
         clickToPlay:            true,
         hideControls:           true,
+        showPosterOnEnd:        false,
         tooltips: {
             controls:           false,
             seek:               true
@@ -131,7 +132,7 @@
             frameTitle:         'Player for {title}'
         },
         types: {
-            embed:              ['youtube', 'vimeo'],
+            embed:              ['youtube', 'vimeo', 'soundcloud'],
             html5:              ['video', 'audio']
         },
         // URLs
@@ -141,6 +142,9 @@
             },
             youtube: {
                 api:            'https://www.youtube.com/iframe_api'
+            },
+            soundcloud: {
+                api:            'https://w.soundcloud.com/player/api.js'
             }
         },
         // Custom control listeners
@@ -445,14 +449,22 @@
     }
 
     // Trigger event
-    function _triggerEvent(element, eventName, properties) {
+    function _triggerEvent(element, eventName, bubbles, properties) {
         // Bail if no element
         if (!element || !eventName) {
             return;
         }
 
-        // create and dispatch the event
+        // Default bubbles to false
-        var event = new CustomEvent(eventName, properties);
+        if (typeof bubbles !== 'boolean') {
+            bubbles = false;
+        }
+
+        // Create and dispatch the event
+        var event = new CustomEvent(eventName, { 
+            bubbles:    bubbles,
+            detail:     properties 
+        });
 
         // Dispatch the event
         element.dispatchEvent(event);
@@ -971,6 +983,7 @@
 
         // Set the current caption
         function _setCaption(caption) {
+            /* jshint unused:false */
             var container = _getElement(config.selectors.captions),
                 content = document.createElement('span');
 
@@ -993,7 +1006,7 @@
             // Set new caption text
             container.appendChild(content);
 
-            // Force redraw
+            // Force redraw (for Safari)
             var redraw = container.offsetHeight;
         }
 
@@ -1344,7 +1357,7 @@
         // Setup YouTube/Vimeo
         function _setupEmbed() {
             var container = document.createElement('div'),
-                videoId = plyr.embedId,
+                mediaId = plyr.embedId,
                 id = plyr.type + '-' + Math.floor(Math.random() * (10000));
 
             // Remove old containers
@@ -1367,7 +1380,7 @@
 
                 // Setup API
                 if (typeof YT === 'object') {
-                    _youTubeReady(videoId, container);
+                    _youTubeReady(mediaId, container);
                 }
                 else {
                     // Load the API
@@ -1377,7 +1390,7 @@
                     window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
 
                     // Add to queue
-                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(videoId, container) });
+                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container) });
 
                     // Set callback to process queue
                     window.onYouTubeIframeAPIReady = function () {
@@ -1388,14 +1401,14 @@
             // Vimeo
             else if (plyr.type === 'vimeo') {
                 // Inject the iframe
-                var iframe = document.createElement('iframe');
+                var vimeo = document.createElement('iframe');
 
                 // Watch for iframe load
-                iframe.loaded = false;
+                vimeo.loaded = false;
-                _on(iframe, 'load', function() { iframe.loaded = true; });
+                _on(vimeo, 'load', function() { vimeo.loaded = true; });
 
-                _setAttributes(iframe, {
+                _setAttributes(vimeo, {
-                    'src':                      'https://player.vimeo.com/video/' + videoId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0',
+                    'src':                      'https://player.vimeo.com/video/' + mediaId + '?player_id=' + id + '&api=1&badge=0&byline=0&portrait=0&title=0',
                     'id':                       id,
                     'webkitallowfullscreen':    '',
                     'mozallowfullscreen':       '',
@@ -1405,23 +1418,53 @@
 
                 // If full support, we can use custom controls (hiding Vimeos), if not, use Vimeo
                 if (plyr.supported.full) {
-                    container.appendChild(iframe);
+                    container.appendChild(vimeo);
                     plyr.media.appendChild(container);
                 }
                 else {
-                    plyr.media.appendChild(iframe);
+                    plyr.media.appendChild(vimeo);
                 }
 
-                // Load the API
+                // Load the API if not already
                 if (!('$f' in window)) {
                     _injectScript(config.urls.vimeo.api);
                 }
 
                 // Wait for fragaloop load
-                var timer = window.setInterval(function() {
+                var vimeoTimer = window.setInterval(function() {
-                    if ('$f' in window && iframe.loaded) {
+                    if ('$f' in window && vimeo.loaded) {
-                        window.clearInterval(timer);
+                        window.clearInterval(vimeoTimer);
-                        _vimeoReady.call(iframe);
+                        _vimeoReady.call(vimeo);
+                    }
+                }, 50);
+            }
+            // Soundcloud
+            else if (plyr.type === 'soundcloud') {
+                // Inject the iframe
+                var soundCloud = document.createElement('iframe');
+
+                // Watch for iframe load
+                soundCloud.loaded = false;
+                _on(soundCloud, 'load', function() { soundCloud.loaded = true; });
+
+                _setAttributes(soundCloud, {
+                    'src':  'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
+                    'id':   id
+                });
+
+                container.appendChild(soundCloud);
+                plyr.media.appendChild(container);
+
+                // Load the API if not already
+                if (!window.SC) {
+                    _injectScript(config.urls.soundcloud.api);
+                }
+
+                // Wait for SC load
+                var soundCloudTimer = window.setInterval(function() {
+                    if (window.SC && soundCloud.loaded) {
+                        window.clearInterval(soundCloudTimer);
+                        _soundcloudReady.call(soundCloud);
                     }
                 }, 50);
             }
@@ -1465,6 +1508,12 @@
                     origin:         '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
                 },
                 events: {
+                    'onError': function(event) {
+                        _triggerEvent(plyr.container, 'error', true, {
+                            code:   event.data,
+                            embed:  event.target
+                        });
+                    },
                     'onReady': function(event) {
                         // Get the instance
                         var instance = event.target;
@@ -1649,6 +1698,85 @@
             });
         }
 
+        // Soundcloud ready
+        function _soundcloudReady() {
+            /* jshint validthis: true */
+            plyr.embed = window.SC.Widget(this);
+
+            // Setup on ready
+            plyr.embed.bind(window.SC.Widget.Events.READY, function() {
+                // Create a faux HTML5 API using the Soundcloud API
+                plyr.media.play = function() {
+                    plyr.embed.play();
+                    plyr.media.paused = false;
+                };
+                plyr.media.pause = function() {
+                    plyr.embed.pause();
+                    plyr.media.paused = true;
+                };
+                plyr.media.stop = function() {
+                    plyr.embed.seekTo(0);
+                    plyr.embed.pause();
+                    plyr.media.paused = true;
+                };
+                plyr.media.paused = true;
+                plyr.media.currentTime = 0;
+
+                // Update UI
+                _embedReady();
+
+                plyr.embed.getPosition(function(value) {
+                    plyr.media.currentTime = value;
+
+                    // Trigger timeupdate
+                    _triggerEvent(plyr.media, 'timeupdate');
+                });
+
+                plyr.embed.getDuration(function(value) {
+                    plyr.media.duration = value/1000;
+                    // Display duration if available
+                    _displayDuration();
+                });
+
+                plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
+                    plyr.media.paused = false;
+                    _triggerEvent(plyr.media, 'play');
+                    _triggerEvent(plyr.media, 'playing');
+                });
+
+                plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
+                    plyr.media.paused = true;
+                    _triggerEvent(plyr.media, 'pause');
+                });
+
+                plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
+                    plyr.media.seeking = false;
+                    plyr.media.currentTime = data.currentPosition/1000;
+                    _triggerEvent(plyr.media, 'timeupdate');
+                });
+
+                plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
+                    plyr.media.buffered = data.loadProgress;
+                    _triggerEvent(plyr.media, 'progress');
+
+                    if (parseInt(data.loadProgress) === 1) {
+                        // Trigger event
+                        _triggerEvent(plyr.media, 'canplaythrough');
+                    }
+                });
+
+                plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
+                    plyr.media.paused = true;
+                    _triggerEvent(plyr.media, 'ended');
+                });
+
+                // Autoplay
+                if (config.autoplay) {
+                    plyr.embed.play();
+                }
+            });
+        }
+
         // Play media
         function _play() {
             if ('play' in plyr.media) {
@@ -1723,10 +1851,8 @@
                 targetTime = duration;
             }
 
-            // Update progress 
+            // Update seek range and progress 
-            if(plyr.progress && plyr.progress.played) {
+            _updateSeekDisplay(targetTime);
-                plyr.progress.played.value = ((100 / duration) * targetTime);
-            }
 
             // Set the current time
             // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
@@ -1747,6 +1873,10 @@
                         // Round to nearest second for vimeo
                         plyr.embed.api('seekTo', targetTime.toFixed(0));
                         break;
+
+                    case 'soundcloud':
+                        plyr.embed.seekTo(targetTime * 1000);
+                        break;
                 }
 
                 if (paused) {
@@ -1770,10 +1900,18 @@
         // Get the duration (or custom if set)
         function _getDuration() {
             // It should be a number, but parse it just incase
-            var duration = parseInt(config.duration);
+            var duration = parseInt(config.duration),
+
+            // True duration
+            mediaDuration = 0;
+
+            // Only if duration available
+            if(plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
+                mediaDuration = plyr.media.duration;
+            }
 
             // If custom duration is funky, use regular duration
-            return (isNaN(duration) ? plyr.media.duration : duration);
+            return (isNaN(duration) ? mediaDuration : duration);
         }
 
         // Check playing state
@@ -1880,6 +2018,10 @@
                     case 'vimeo':
                         plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10));
                         break;
+
+                    case 'soundcloud':
+                        plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / 10));
+                        break;
                 }
 
                 // Trigger volumechange for embeds
@@ -1935,6 +2077,10 @@
                     case 'vimeo':
                         plyr.embed.api('setVolume', plyr.media.volume);
                         break;
+
+                    case 'soundcloud':
+                        plyr.embed.setVolume(plyr.media.volume);
+                        break;
                 }
 
                 // Trigger volumechange for embeds
@@ -2017,7 +2163,6 @@
         // Update <progress> elements
         function _updateProgress(event) {
             var progress    = plyr.progress.played,
-                text        = false,
                 value       = 0,
                 duration    = _getDuration();
 
@@ -2038,8 +2183,7 @@
                     // Check buffer status
                     case 'playing':
                     case 'progress':
-                        progress    = plyr.progress.buffer.bar;
+                        progress    = plyr.progress.buffer;
-                        text        = plyr.progress.buffer.text;
                         value       = (function() {
                             var buffered = plyr.media.buffered;
 
@@ -2060,11 +2204,27 @@
             }
 
             // Set values
-            if (progress) {
+            _setProgress(progress, value);
+        }
+
+        // Set <progress> value
+        function _setProgress(progress, value) {
+            if (typeof value === 'undefined') {
+                value = 0;
+            }
+
+            // One progress element passed
+            if (progress instanceof HTMLElement) {
                 progress.value = value;
             }
-            if (text) {
+            // Object of progress + text element
-                text.innerHTML = value;
+            else if (progress) {
+                if (progress.bar) {
+                    progress.bar.value = value;
+                }
+                if (progress.text) {
+                    progress.text.innerHTML = value;
+                }
             }
         }
 
@@ -2132,10 +2292,33 @@
             _updateProgress(event);
         }
 
+        // Update seek range and progress 
+        function _updateSeekDisplay(time) {
+            // Default to 0
+            if (typeof time !== 'number') {
+                time = 0;
+            }
+
+            var duration    = _getDuration(),
+                value       = _getPercentage(time, duration);
+
+            // Update progress 
+            if (plyr.progress && plyr.progress.played) {
+                plyr.progress.played.value = value;
+            }
+
+            // Update seek range input
+            if (plyr.buttons && plyr.buttons.seek) {
+                plyr.buttons.seek.value = value;
+            }
+        }
+
         // Update hover tooltip for seeking
         function _updateSeekTooltip(event) {
+            var duration = _getDuration();
+
             // Bail if setting not true
-            if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) {
+            if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
                 return;
             }
 
@@ -2166,7 +2349,7 @@
             }
 
             // Display the time a click would seek to
-            _updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip);
+            _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
 
             // Set position
             plyr.progress.tooltip.style.left = percent + "%";
@@ -2259,6 +2442,12 @@
                     });
                     break;
 
+                case 'soundcloud':
+                    plyr.embed.getCurrentSound(function(object) {
+                        url = object.permalink_url;
+                    });
+                    break;
+
                 default:
                     url = plyr.media.currentSrc;
                     break;
@@ -2278,13 +2467,14 @@
             // Pause playback
             _pause();
 
-            // Set seek input to 0
+            // Update seek range and progress
-            if (plyr.buttons && plyr.buttons.seek) {
+            _updateSeekDisplay();
-                plyr.buttons.seek.value = 0;
+
-            }
+            // Reset buffer progress
-            if (plyr.progress && plyr.progress.played) {
+            _setProgress(plyr.progress.buffer);
-                plyr.progress.played.value = 0;
+
-            }
+            // Cancel current network requests
+            _cancelRequests();
 
             // Clean up YouTube stuff
             if (plyr.type === 'youtube') {
@@ -2295,6 +2485,7 @@
                 window.clearInterval(plyr.timer.buffering);
                 window.clearInterval(plyr.timer.playing);
             }
+            // HTML5 Video
             else if (plyr.type === 'video' && plyr.videoContainer) {
                 // Remove video wrapper
                 _remove(plyr.videoContainer);
@@ -2303,9 +2494,6 @@
             // Remove embed object
             plyr.embed = null;
 
-            // Cancel current network requests
-            _cancelRequests();
-
             // Remove the old media
             _remove(plyr.media);
 
@@ -2338,6 +2526,7 @@
 
                 case 'youtube':
                 case 'vimeo':
+                case 'soundcloud':
                     plyr.media = document.createElement('div');
                     plyr.embedId = source.sources[0].src;
                     break;
@@ -2575,6 +2764,18 @@
 
                 // Reset UI
                 _checkPlaying();
+
+                // Seek to 0
+                _seek(0);
+
+                // Reset duration display
+                _displayDuration();
+
+                // Show poster on end
+                if(plyr.type === 'video' && config.showPosterOnEnd) {
+                    // Re-load media
+                    plyr.media.load();
+                }
             });
 
             // Check for buffer progress
@@ -2619,7 +2820,7 @@
 
             // Proxy events to container
             _on(plyr.media, config.events.join(' '), function(event) {
-                _triggerEvent(plyr.container, event.type);
+                _triggerEvent(plyr.container, event.type, true);
             });
         }
 
@@ -2630,15 +2831,18 @@
                 return;
             }
 
-            // Set empty src attribute
-            plyr.media.setAttribute('src', '');
-
             // Remove child sources
             var sources = plyr.media.querySelectorAll('source');
             for (var i = 0; i < sources.length; i++) {
                 _remove(sources[i]);
             }
 
+            // Set blank video src attribute
+            // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
+            // Small mp4: https://github.com/mathiasbynens/small/blob/master/mp4.mp4
+            // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
+            plyr.media.setAttribute('src', 'data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAGm1kYXQAAAGzABAHAAABthBgUYI9t+8AAAMNbW9vdgAAAGxtdmhkAAAAAMXMvvrFzL76AAAD6AAAACoAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAABhpb2RzAAAAABCAgIAHAE/////+/wAAAiF0cmFrAAAAXHRraGQAAAAPxcy++sXMvvoAAAABAAAAAAAAACoAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAgAAAAIAAAAAAG9bWRpYQAAACBtZGhkAAAAAMXMvvrFzL76AAAAGAAAAAEVxwAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAABaG1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAShzdGJsAAAAxHN0c2QAAAAAAAAAAQAAALRtcDR2AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAgACABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAXmVzZHMAAAAAA4CAgE0AAQAEgICAPyARAAAAAAMNQAAAAAAFgICALQAAAbABAAABtYkTAAABAAAAASAAxI2IAMUARAEUQwAAAbJMYXZjNTMuMzUuMAaAgIABAgAAABhzdHRzAAAAAAAAAAEAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAAAAASAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYHVkdGEAAABYbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAraWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yMS4x');
+
             // Load the new empty source
             // This will cancel existing requests
             // See https://github.com/Selz/plyr/issues/174
@@ -2897,6 +3101,7 @@
 
             case 'vimeo':
             case 'youtube':
+            case 'soundcloud':
                 basic = true;
                 full  = (!oldIE && !iPhone);
                 break;

src/less/plyr.less

@@ -76,9 +76,6 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
-        &::-moz-focus-outer {
-            border: 0;
-        }
         
         // Microsoft
         &::-ms-track {
@@ -201,12 +198,13 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
+    padding: (@plyr-control-spacing * 2);
+    transform: translateY(-(@plyr-control-spacing * 6));
+    transition: transform .3s ease;
     color: #fff;
     font-size: @plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     span {
         border-radius: 2px;
@@ -227,6 +225,9 @@
 .plyr--fullscreen-active .plyr__captions {
     font-size: @plyr-font-size-captions-large;
 }
+.plyr--hide-controls .plyr__captions {
+    transform: translateY(-(@plyr-control-spacing * 2));
+}
 
 // Controls
 // --------------------------------------------------------------
@@ -421,7 +422,6 @@
 // Tooltips
 // --------------------------------------------------------------
 .plyr__tooltip {
-    visibility: hidden;
     position: absolute;
     z-index: 2;
     bottom: 100%;
@@ -437,23 +437,21 @@
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
     line-height: 1.3;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+    transition: transform .2s .1s ease, opacity .2s .1s ease;
 
-    // Arrows
     &::before {
+        // Arrows
         content: '';
         position: absolute;
         width: 0;
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    }
+    
         // The background triangle
-    &::before {
         bottom: -@plyr-tooltip-arrow-size;
         border-right: @plyr-tooltip-arrow-size solid transparent;
         border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
@@ -464,7 +462,6 @@
 .plyr button:hover .plyr__tooltip,
 .plyr button.tab-focus:focus .plyr__tooltip,
 .plyr__tooltip--visible {
-    visibility: visible;
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
 }
@@ -477,6 +474,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
+    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -500,9 +498,9 @@
     }
 }
 
-.plyr__progress--buffer[value],
+.plyr__progress--buffer,
-.plyr__progress--played[value],
+.plyr__progress--played,
-.plyr__volume--display[value] {
+.plyr__volume--display {
     position: absolute;
     left: 0;
     top: 50%;
@@ -532,8 +530,8 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played[value],
+.plyr__progress--played,
-.plyr__volume--display[value] {
+.plyr__volume--display {
     z-index: 1;
     color: @plyr-range-selected-bg;
     background: transparent;
@@ -555,7 +553,7 @@
         display: none;
     }
 }
-.plyr__progress--buffer[value] {
+.plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width .2s ease;
     }
@@ -566,18 +564,18 @@
         transition: width .2s ease;
     }            
 }
-.plyr--video .plyr__progress--buffer[value],
+.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display[value] {
+.plyr--video .plyr__volume--display {
     background: @plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer[value] { 
+.plyr--video .plyr__progress--buffer { 
     color: @plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer[value],
+.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display[value] {
+.plyr--audio .plyr__volume--display {
     background: @plyr-audio-range-track-bg;
 }
-.plyr--audio .plyr__progress--buffer[value] {
+.plyr--audio .plyr__progress--buffer {
     color: @plyr-audio-progress-buffered-bg;
 }
 
@@ -611,7 +609,6 @@
     vertical-align: middle;
     font-size: @plyr-font-size-small;
     line-height: .95;
-    -webkit-font-smoothing: subpixel-antialiased;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@@ -632,6 +629,7 @@
 // --------------------------------------------------------------
 .plyr .plyr__volume { 
     display: none;
+    flex: 1;
     position: relative;
 
     input[type="range"] {

src/scss/plyr.scss

@@ -76,9 +76,6 @@
         &::-moz-range-thumb {
             @include plyr-range-thumb();
         }
-        &::-moz-focus-outer {
-            border: 0;
-        }
         
         // Microsoft
         &::-ms-track {
@@ -201,12 +198,13 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 8);
+    padding: ($plyr-control-spacing * 2);
+    transform: translateY(-($plyr-control-spacing * 6));
+    transition: transform .3s ease;
     color: #fff;
     font-size: $plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     span {
         border-radius: 2px;
@@ -227,6 +225,9 @@
 .plyr--fullscreen-active .plyr__captions {
     font-size: $plyr-font-size-captions-large;
 }
+.plyr--hide-controls .plyr__captions {
+    transform: translateY(-($plyr-control-spacing * 2));
+}
 
 // Controls
 // --------------------------------------------------------------
@@ -421,7 +422,6 @@
 // Tooltips
 // --------------------------------------------------------------
 .plyr__tooltip {
-    visibility: hidden;
     position: absolute;
     z-index: 2;
     bottom: 100%;
@@ -437,23 +437,21 @@
     color: $plyr-tooltip-color;
     font-size: $plyr-font-size-small;
     line-height: 1.3;
-    -webkit-font-smoothing: subpixel-antialiased;
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
+    transition: transform .2s .1s ease, opacity .2s .1s ease;
 
-    // Arrows
     &::before {
+        // Arrows
         content: '';
         position: absolute;
         width: 0;
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    }
+    
         // The background triangle
-    &::before {
         bottom: -$plyr-tooltip-arrow-size;
         border-right: $plyr-tooltip-arrow-size solid transparent;
         border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
@@ -464,7 +462,6 @@
 .plyr button:hover .plyr__tooltip,
 .plyr button.tab-focus:focus .plyr__tooltip,
 .plyr__tooltip--visible {
-    visibility: visible;
     opacity: 1;
     transform: translate(-50%, 0) scale(1);
 }
@@ -477,6 +474,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
+    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -500,9 +498,9 @@
     }
 }
 
-.plyr__progress--buffer[value],
+.plyr__progress--buffer,
-.plyr__progress--played[value],
+.plyr__progress--played,
-.plyr__volume--display[value] {
+.plyr__volume--display {
     position: absolute;
     left: 0;
     top: 50%;
@@ -532,8 +530,8 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played[value],
+.plyr__progress--played,
-.plyr__volume--display[value] {
+.plyr__volume--display {
     z-index: 1;
     color: $plyr-range-selected-bg;
     background: transparent;
@@ -555,7 +553,7 @@
         display: none;
     }
 }
-.plyr__progress--buffer[value] {
+.plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width .2s ease;
     }
@@ -566,18 +564,18 @@
         transition: width .2s ease;
     }            
 }
-.plyr--video .plyr__progress--buffer[value],
+.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display[value] {
+.plyr--video .plyr__volume--display {
     background: $plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer[value] { 
+.plyr--video .plyr__progress--buffer { 
     color: $plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer[value],
+.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display[value] {
+.plyr--audio .plyr__volume--display {
     background: $plyr-audio-range-track-bg;
 }
-.plyr--audio .plyr__progress--buffer[value] {
+.plyr--audio .plyr__progress--buffer {
     color: $plyr-audio-progress-buffered-bg;
 }
 
@@ -611,7 +609,6 @@
     vertical-align: middle;
     font-size: $plyr-font-size-small;
     line-height: .95;
-    -webkit-font-smoothing: subpixel-antialiased;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@@ -632,6 +629,7 @@
 // --------------------------------------------------------------
 .plyr .plyr__volume { 
     display: none;
+    flex: 1;
     position: relative;
 
     input[type="range"] {