Clean up

changelog.md

@@ -1,7 +1,7 @@
 # Changelog
 
 # v1.5.0
-- *Beta* Vimeo support (please report bugs) (fixes #8)
+- Vimeo support (fixes #8)
 - New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)
 - Switched to BEM methodology (you will need to change CSS and probably HTML)
 - Decoupled CSS and JS hooks (fixes #129)

docs/index.html

@@ -20,12 +20,12 @@
             <nav>
                 <ul>
                     <li>
-                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn--primary" data-shr-network="github">
+                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
                             <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
                         </a>
                     </li>
                     <li>
-                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--twitter" data-shr-network="twitter">
+                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
                             <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
                         </a>
                     </li>
@@ -46,7 +46,7 @@
                         <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
                     </li>
                     <li>
-                        <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo <sup>BETA</sup></button>
+                        <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
                     </li>
                 </ul>
             </nav>

docs/src/less/components/buttons.less

@@ -98,13 +98,14 @@ nav {
 
 // Buttons
 .btn {
-	padding: (@padding-base / 2) @padding-base;
+	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
 	background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
 	border: 1px solid @gray-light;
 	box-shadow: 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
 	transition: background .1s ease, color .1s ease;
+	.font-size(@font-size-small);
 
 	&:hover,
 	&:focus {
@@ -112,16 +113,15 @@ nav {
 		color: @gray;
 		outline: 0;
 	}
-	&--youtube .icon {
-		color: @color-youtube;
-	}
-	&--vimeo .icon {
-		color: @color-vimeo;
-	}
-	&--twitter .icon {
-		color: @color-twitter;
-	}
 }
+
+// Sizes
+.btn--large {
+	padding: (@padding-base / 2) @padding-base;
+	.font-size();
+}
+
+// Styles
 .btn--primary {
 	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
 	background-color: @link-color;
@@ -136,9 +136,14 @@ nav {
 		border-color: darken(@link-color, 20%);
 	}
 }
-.btn--small {
+.btn--youtube .icon {
-	padding-top: ceil(@padding-base / 3);
+	color: @color-youtube;
-	padding-bottom: ceil(@padding-base / 3);
+}
+.btn--vimeo .icon {
+	color: @color-vimeo;
+}
+.btn--twitter .icon {
+	color: @color-twitter;
 }
 
 // Count bubble

docs/src/less/components/examples.less

@@ -5,6 +5,8 @@
 video,
 .plyr__video-embed {
     border-radius: @border-radius-base;
+    max-width: 100%;
+    vertical-align: middle;
 }
 .plyr__video-embed {
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

docs/src/less/components/icons.less

@@ -20,3 +20,7 @@ a .icon,
 .btn .icon {
 	margin-right: (@padding-base / 2);
 }
+.btn:not(.btn-large) .icon {
+	width: (@icon-size - 2);
+	height: (@icon-size - 2);
+}

docs/src/less/components/type.less

@@ -12,7 +12,7 @@ h2 {
     .font-smoothing();
 }
 h1 {
-    .font-size(64);
+    .font-size(@font-size-h1);
     color: #3498DB;
 }
 
@@ -24,11 +24,7 @@ small {
 small {
     display: block;
     padding: 0 (@padding-base / 2);
-    .font-size(14);
+    .font-size(@font-size-small);
-}
-sup {
-    vertical-align: 2px;
-    .font-size(9);
 }
 
 // Lists

docs/src/less/variables.less

@@ -18,6 +18,11 @@
 // Base
 @body-background: 			@off-white;
 
+// Type
+@font-size-base:            16;
+@font-size-small:           14;
+@font-size-h1:              64;
+
 // Elements
 @link-color:                @blue;
 @padding-base:              20px;

src/js/plyr.js

@@ -980,6 +980,11 @@
             }
         }
 
+        // Toggle style hook
+        function _toggleStyleHook() {
+            _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+        }
+
         // Setup aria attribute for play and iframe title
         function _setTitle(iframe) {
             // Find the current text
@@ -1136,20 +1141,11 @@
 
         // When embeds are ready
         function _embedReady() {
-            // Inject and update UI
+            // Setup the UI
-            if (plyr.supported.full) {
+            _setupInterface();
-                // Only setup controls once
-                if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) {
-                    _setupInterface();
-                }
-            }
 
             // Set title
             _setTitle(_getElement('iframe'));
-
-            // Set the volume
-            _setVolume();
-            _updateVolume();
         }
 
         // Handle YouTube API ready
@@ -1165,7 +1161,7 @@
             plyr.embed = new YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay: (config.autoplay ? 1 : 0),
+                    autoplay: 0,
                     controls: (plyr.supported.full ? 0 : 1),
                     rel: 0,
                     showinfo: 0,
@@ -1196,7 +1192,7 @@
                             plyr.media.paused = true;
                         };
                         plyr.media.duration = instance.getDuration();
-                        plyr.media.paused = !config.autoplay;
+                        plyr.media.paused = true;
                         plyr.media.currentTime = instance.getCurrentTime();
                         plyr.media.muted = instance.isMuted();
 
@@ -1224,9 +1220,7 @@
                         _embedReady();
 
                         // Display duration if available
-                        if (config.displayDuration) {
+                        _displayDuration();
-                            _displayDuration();
-                        }
                     },
                     'onStateChange': function(event) {
                         // Get the instance
@@ -1250,6 +1244,7 @@
 
                             case 1:
                                 plyr.media.paused = false;
+                                plyr.media.seeking = false;
                                 _triggerEvent(plyr.media, 'play');
 
                                 // Poll to get playback progress
@@ -1259,7 +1254,7 @@
 
                                     // Trigger timeupdate
                                     _triggerEvent(plyr.media, 'timeupdate');
-                                }, 200);
+                                }, 100);
 
                                 break;
 
@@ -1293,7 +1288,7 @@
                     plyr.embed.api('stop');
                     plyr.media.paused = true;
                 };
-                plyr.media.paused = !config.autoplay;
+                plyr.media.paused = true;
                 plyr.media.currentTime = 0;
 
                 // Update UI
@@ -1310,9 +1305,7 @@
                     plyr.media.duration = value;
 
                     // Display duration if available
-                    if (plyr.supported.full && config.displayDuration) {
+                    _displayDuration();
-                        _displayDuration();
-                    }
                 });
 
                 plyr.embed.addEvent('play', function() {
@@ -1326,6 +1319,7 @@
                 });
 
                 plyr.embed.addEvent('playProgress', function(data) {
+                    plyr.media.seeking = false;
                     plyr.media.currentTime = data.seconds;
                     _triggerEvent(plyr.media, 'timeupdate');
                 });
@@ -1352,149 +1346,151 @@
 
         // Setup captions
         function _setupCaptions() {
-            if (plyr.type === 'video') {
+            if (plyr.type !== 'video') {
-                // Inject the container
+                return;
-                if (!_getElement(config.selectors.captions)) {
+            }
-                    plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
-                }
 
-                // Cache selector
+            // Inject the container
-                plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
+            if (!_getElement(config.selectors.captions)) {
+                plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
+            }
 
-                // Determine if HTML5 textTracks is supported
+            // Cache selector
-                plyr.usingTextTracks = false;
+            plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
-                if (plyr.media.textTracks) {
-                    plyr.usingTextTracks = true;
-                }
 
-                // Get URL of caption file if exists
+            // Determine if HTML5 textTracks is supported
-                var captionSrc = '',
+            plyr.usingTextTracks = false;
-                    kind,
+            if (plyr.media.textTracks) {
-                    children = plyr.media.childNodes;
+                plyr.usingTextTracks = true;
+            }
 
-                for (var i = 0; i < children.length; i++) {
+            // Get URL of caption file if exists
-                    if (children[i].nodeName.toLowerCase() === 'track') {
+            var captionSrc = '',
-                        kind = children[i].kind;
+                kind,
-                        if (kind === 'captions' || kind === 'subtitles') {
+                children = plyr.media.childNodes;
-                            captionSrc = children[i].getAttribute('src');
+
-                        }
+            for (var i = 0; i < children.length; i++) {
+                if (children[i].nodeName.toLowerCase() === 'track') {
+                    kind = children[i].kind;
+                    if (kind === 'captions' || kind === 'subtitles') {
+                        captionSrc = children[i].getAttribute('src');
                     }
                 }
+            }
 
-                // Record if caption file exists or not
+            // Record if caption file exists or not
-                plyr.captionExists = true;
+            plyr.captionExists = true;
-                if (captionSrc === '') {
+            if (captionSrc === '') {
-                    plyr.captionExists = false;
+                plyr.captionExists = false;
-                    _log('No caption track found.');
+                _log('No caption track found.');
-                }
+            }
-                else {
+            else {
-                    _log('Caption track found; URI: ' + captionSrc);
+                _log('Caption track found; URI: ' + captionSrc);
+            }
+
+            // If no caption file exists, hide container for caption text
+            if (!plyr.captionExists) {
+                _toggleClass(plyr.container, config.classes.captions.enabled);
+            }
+            // If caption file exists, process captions
+            else {
+                // Turn off native caption rendering to avoid double captions
+                // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
+                var tracks = plyr.media.textTracks;
+                for (var x = 0; x < tracks.length; x++) {
+                    tracks[x].mode = 'hidden';
                 }
 
-                // If no caption file exists, hide container for caption text
+                // Enable UI
-                if (!plyr.captionExists) {
+                _showCaptions(plyr);
-                    _toggleClass(plyr.container, config.classes.captions.enabled);
+
+                // Disable unsupported browsers than report false positive
+                if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
+                    (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
+                    (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
+                    (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
+                    // Debugging
+                    _log('Detected unsupported browser for HTML5 captions. Using fallback.');
+
+                    // Set to false so skips to 'manual' captioning
+                    plyr.usingTextTracks = false;
                 }
-                // If caption file exists, process captions
-                else {
-                    // Turn off native caption rendering to avoid double captions
-                    // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
-                    var tracks = plyr.media.textTracks;
-                    for (var x = 0; x < tracks.length; x++) {
-                        tracks[x].mode = 'hidden';
-                    }
 
-                    // Enable UI
+                // Rendering caption tracks
-                    _showCaptions(plyr);
+                // Native support required - http://caniuse.com/webvtt
+                if (plyr.usingTextTracks) {
+                    _log('TextTracks supported.');
 
-                    // Disable unsupported browsers than report false positive
+                    for (var y = 0; y < tracks.length; y++) {
-                    if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
+                        var track = tracks[y];
-                        (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
-                        (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
-                        (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
-                        // Debugging
-                        _log('Detected unsupported browser for HTML5 captions. Using fallback.');
 
-                        // Set to false so skips to 'manual' captioning
+                        if (track.kind === 'captions' || track.kind === 'subtitles') {
-                        plyr.usingTextTracks = false;
+                            _on(track, 'cuechange', function() {
-                    }
+                                // Clear container
+                                plyr.captionsContainer.innerHTML = '';
 
-                    // Rendering caption tracks
+                                // Display a cue, if there is one
-                    // Native support required - http://caniuse.com/webvtt
+                                if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
-                    if (plyr.usingTextTracks) {
+                                    plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
-                        _log('TextTracks supported.');
-
-                        for (var y = 0; y < tracks.length; y++) {
-                            var track = tracks[y];
-
-                            if (track.kind === 'captions' || track.kind === 'subtitles') {
-                                _on(track, 'cuechange', function() {
-                                    // Clear container
-                                    plyr.captionsContainer.innerHTML = '';
-
-                                    // Display a cue, if there is one
-                                    if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
-                                        plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
-                                    }
-                                });
-                            }
-                        }
-                    }
-                    // Caption tracks not natively supported
-                    else {
-                        _log('TextTracks not supported so rendering captions manually.');
-
-                        // Render captions from array at appropriate time
-                        plyr.currentCaption = '';
-                        plyr.captions = [];
-
-                        if (captionSrc !== '') {
-                            // Create XMLHttpRequest Object
-                            var xhr = new XMLHttpRequest();
-
-                            xhr.onreadystatechange = function() {
-                                if (xhr.readyState === 4) {
-                                    if (xhr.status === 200) {
-                                        var records = [],
-                                            record,
-                                            req = xhr.responseText;
-
-                                        records = req.split('\n\n');
-
-                                        for (var r = 0; r < records.length; r++) {
-                                            record = records[r];
-                                            plyr.captions[r] = [];
-                                            plyr.captions[r] = record.split('\n');
-                                        }
-
-                                        // Remove first element ('VTT')
-                                        plyr.captions.shift();
-
-                                        _log('Successfully loaded the caption file via AJAX.');
-                                    }
-                                    else {
-                                        _log('There was a problem loading the caption file via AJAX.', true);
-                                    }
                                 }
-                            };
+                            });
-
-                            xhr.open('get', captionSrc, true);
-
-                            xhr.send();
                         }
                     }
+                }
+                // Caption tracks not natively supported
+                else {
+                    _log('TextTracks not supported so rendering captions manually.');
 
-                    // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
+                    // Render captions from array at appropriate time
-                    if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
+                    plyr.currentCaption = '';
-                        _log('Safari 7+ detected; removing track from DOM.');
+                    plyr.captions = [];
 
-                        // Find all <track> elements
+                    if (captionSrc !== '') {
-                        tracks = plyr.media.getElementsByTagName('track');
+                        // Create XMLHttpRequest Object
+                        var xhr = new XMLHttpRequest();
 
-                        // Loop through and remove one by one
+                        xhr.onreadystatechange = function() {
-                        for (var t = 0; t < tracks.length; t++) {
+                            if (xhr.readyState === 4) {
-                            plyr.media.removeChild(tracks[t]);
+                                if (xhr.status === 200) {
-                        }
+                                    var records = [],
+                                        record,
+                                        req = xhr.responseText;
+
+                                    records = req.split('\n\n');
+
+                                    for (var r = 0; r < records.length; r++) {
+                                        record = records[r];
+                                        plyr.captions[r] = [];
+                                        plyr.captions[r] = record.split('\n');
+                                    }
+
+                                    // Remove first element ('VTT')
+                                    plyr.captions.shift();
+
+                                    _log('Successfully loaded the caption file via AJAX.');
+                                }
+                                else {
+                                    _log('There was a problem loading the caption file via AJAX.', true);
+                                }
+                            }
+                        };
+
+                        xhr.open('get', captionSrc, true);
+
+                        xhr.send();
+                    }
+                }
+
+                // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
+                if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
+                    _log('Safari 7+ detected; removing track from DOM.');
+
+                    // Find all <track> elements
+                    tracks = plyr.media.getElementsByTagName('track');
+
+                    // Loop through and remove one by one
+                    for (var t = 0; t < tracks.length; t++) {
+                        plyr.media.removeChild(tracks[t]);
                     }
                 }
             }
@@ -1502,6 +1498,10 @@
 
         // Setup fullscreen
         function _setupFullscreen() {
+            if (!plyr.supported.full) {
+                return;
+            }
+
             if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
                 // Check for native support
                 var nativeSupport = fullscreen.supportsFullScreen;
@@ -1609,24 +1609,28 @@
             }
             catch(e) {}
 
-            // Trigger timeupdate for embed and restore pause state
+            // Embeds
-            if ('embed' in plyr) {
+            if(_inArray(config.types.embed, plyr.type)) {
                 // YouTube
-                if (plyr.type === 'youtube') {
+                switch(plyr.type) {
-                    plyr.embed.seekTo(targetTime);
+                    case 'youtube':
-                }
+                        plyr.embed.seekTo(targetTime);
+                        break;
 
-                // Vimeo
+                    case 'vimeo':
-                if (plyr.type === 'vimeo') {
+                        plyr.embed.api('seekTo', targetTime);
-                    plyr.embed.api('seekTo', targetTime);
+                        break;
                 }
 
-                // Trigger timeupdate
-                _triggerEvent(plyr.media, 'timeupdate');
-
                 if (paused) {
                     _pause();
                 }
+
+                // Trigger timeupdate for embeds
+                _triggerEvent(plyr.media, 'timeupdate');
+
+                // Set seeking flag
+                plyr.media.seeking = true;
             }
 
             // Logging
@@ -1754,24 +1758,20 @@
             // Set mute on the player
             plyr.media.muted = muted;
 
-            // YouTube
+            // Embeds
-            if (plyr.type === 'youtube') {
+            if(_inArray(config.types.embed, plyr.type)) {
-                plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+                // YouTube
+                switch(plyr.type) {
+                    case 'youtube':
+                        plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+                        break;
 
-                // Trigger timeupdate
+                    case 'vimeo':
-                _triggerEvent(plyr.media, 'volumechange');
+                        plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10));
-            }
+                        break;
-
-            // Vimeo
-            if (plyr.type === 'vimeo') {
-                if (plyr.media.muted) {
-                    plyr.embed.api('setVolume', 0);
-                }
-                else {
-                    plyr.embed.api('setVolume', parseFloat(config.volume / 10));
                 }
 
-                // Trigger timeupdate
+                // Trigger volumechange for embeds
                 _triggerEvent(plyr.media, 'volumechange');
             }
         }
@@ -1803,18 +1803,20 @@
             // Store in config
             config.volume = volume;
 
-            // YouTube
+            // Embeds
-            if (plyr.type === 'youtube') {
+            if(_inArray(config.types.embed, plyr.type)) {
-                plyr.embed.setVolume(plyr.media.volume * 100);
+                // YouTube
-            }
+                switch(plyr.type) {
+                    case 'youtube':
+                        plyr.embed.setVolume(plyr.media.volume * 100);
+                        break;
 
-            // Vimeo
+                    case 'vimeo':
-            if (plyr.type === 'vimeo') {
+                        plyr.embed.api('setVolume', plyr.media.volume);
-                plyr.embed.api('setVolume', plyr.media.volume);
+                        break;
-            }
+                }
 
-            // Trigger volumechange for embeds
+                // Trigger volumechange for embeds
-            if ('embed' in plyr) {
                 _triggerEvent(plyr.media, 'volumechange');
             }
 
@@ -1970,6 +1972,10 @@
 
         // Show the duration on metadataloaded
         function _displayDuration() {
+            if (!plyr.supported.full) {
+                return;
+            }
+
             var duration = plyr.media.duration || 0;
 
             // If there's only one time display, display duration there
@@ -1988,6 +1994,11 @@
             // Duration
             _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
 
+            // Ignore updates while seeking
+            if(event && event.type == 'timeupdate' && plyr.media.seeking) {
+                return;
+            }
+
             // Playing progress
             _updateProgress(event);
         }
@@ -2041,7 +2052,7 @@
                 window.clearInterval(plyr.timer.buffering);
                 window.clearInterval(plyr.timer.playing);
             }
-            else if (plyr.type === 'video') {
+            else if (plyr.type === 'video' && plyr.videoContainer) {
                 // Remove video wrapper
                 _remove(plyr.videoContainer);
             }
@@ -2105,6 +2116,7 @@
             // Restore class hooks
             _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
             _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
+            _toggleStyleHook();
 
             // Autoplay the new source?
             config.autoplay = (source.autoplay || config.autoplay);
@@ -2117,41 +2129,29 @@
             // Set up from scratch
             _setupMedia();
 
-            // Trigger media updated
-            _mediaUpdated();
-
             // HTML5 stuff
             if (_inArray(config.types.html5, plyr.type)) {
-                // Set volume
-                _setVolume();
-                _updateVolume();
-
-                // UI updates
-                if (plyr.supported.full) {
-                    // Reset time display
-                    _timeUpdate();
-
-                    // Update the UI
-                    _checkPlaying();
-                }
-
                 // Setup captions
                 if ('tracks' in source) {
                     _insertChildElements('track', source.tracks);
-
-                    // Captions
-                    _setupCaptions();
                 }
 
                 // Load HTML5 sources
                 plyr.media.load();
 
-                // Play if autoplay attribute is present
+                // Display duration if available
-                if (config.autoplay) {
+                _displayDuration();
-                    _play();
+
-                }
+                // Setup interface
+                _setupInterface();
             }
 
+            // Play if autoplay attribute is present
+            if (config.autoplay) {
+                _play();
+            }
+
+            // Set aria title and iframe title
             if ('title' in source) {
                 config.title = source.title;
                 _setTitle();
@@ -2376,9 +2376,6 @@
             // Get the media element
             plyr.media = plyr.container.querySelectorAll('audio, video, div')[0];
 
-            // Add style hook
-            _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), true);
-
             // Get original classname
             plyr.originalClassName = plyr.container.className;
 
@@ -2403,6 +2400,9 @@
             // Check for full support
             plyr.supported = api.supported(plyr.type);
 
+            // Add style hook
+            _toggleStyleHook();
+
             // If no native support, bail
             if (!plyr.supported.basic) {
                 return false;
@@ -2415,7 +2415,7 @@
             _setupMedia();
 
             // Setup interface
-            if (plyr.type == 'video' || plyr.type == 'audio') {
+            if (_inArray(config.types.html5, plyr.type)) {
                 // Bail if no support
                 if (!plyr.supported.full) {
                     // Successful setup
@@ -2428,11 +2428,6 @@
                 // Setup UI
                 _setupInterface();
 
-                // Display duration if available
-                if (config.displayDuration) {
-                    _displayDuration();
-                }
-
                 // Set title on button and frame
                 _setTitle();
             }
@@ -2442,31 +2437,40 @@
         }
 
         function _setupInterface() {
+            // Don't setup interface if no support
+            if (!plyr.supported.full) {
+                return;
+            }
+
             // Inject custom controls
-            _injectControls();
+            if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) {
+                // Inject custom controls
+                _injectControls();
+            }
 
             // Find the elements
             if (!_findElements()) {
-                return false;
+                return;
             }
 
-            // Captions
-            _setupCaptions();
-
-            // Media updated
-            _mediaUpdated();
-
-            // Set volume
-            _setVolume();
-            _updateVolume();
-        }
-
-        function _mediaUpdated() {
             // Setup fullscreen
             _setupFullscreen();
 
             // Listeners
             _listeners();
+
+            // Captions
+            _setupCaptions();
+
+            // Set volume
+            _setVolume();
+            _updateVolume();
+
+            // Reset time display
+            _timeUpdate();
+
+            // Update the UI
+            _checkPlaying();
         }
 
         // Initialize instance

src/less/plyr.less

@@ -583,7 +583,7 @@
     // Hide sound controls on iOS
     // It's not supported to change volume using JavaScript:
     // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-    &--is-ios &-volume,
+    &--is-ios &__volume,
     &--is-ios [data-plyr='mute'],
     &--is-ios.plyr--audio &__controls--right {
         display: none;