Version bump

Make the player button clickable on small videos

changelog.md

@@ -1,6 +1,22 @@
 # Changelog
 
-# v1.8.3
+## v1.8.8
+- Added getCurrentTime API method (fixes #292)
+- Fix for !hideControls on touch devices (fixes #303)
+
+## v1.8.7
+- Line height fix
+
+## v1.8.6
+- Reverted font size change
+
+## v1.8.5
+- Fixed overflow issues (fixes #286)
+
+## v1.8.4
+- Fix for large play button on small videos
+
+## v1.8.3
 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback
 - Fixed IE11 icon loading (fixes #269)
 - Updated screenshot (fixes #281)
@@ -9,10 +25,10 @@
 - Added HLS, Shaka and dash.js examples (see #235 for more)
 - Improvements for controls hiding and showing on touch devices
 
-# v1.8.2
+## v1.8.2
 - Fixed event bubbling 
 
-# v1.8.1
+## v1.8.1
 - Fixed inaccurate log message
 
 # v1.8.0

demo/src/js/main.js

@@ -8,78 +8,78 @@
 
 // General functions
 ;(function() {
-	document.body.addEventListener('ready', function(event) { console.log(event); });
+    document.body.addEventListener('ready', function(event) { console.log(event); });
+    
+    // Setup the player
+    var instances = plyr.setup({
+        debug:              true,
+        title:              'Video demo',
+        iconUrl:            '../dist/plyr.svg',
+        tooltips: {
+            controls:       true
+        },
+        captions: {
+            defaultActive:  true
+        }
+    });
+    plyr.loadSprite('dist/demo.svg');
 
-	// Setup the player
+    // Plyr returns an array regardless
-	var instances = plyr.setup({
+    var player = instances[0].plyr;
-		debug: 				true,
-		title: 				'Video demo',
-		iconUrl: 			'../dist/plyr.svg',
-		tooltips: {
-			controls: 		true
-		},
-		captions: {
-			defaultActive: 	true
-		}
-	});
-	plyr.loadSprite('dist/demo.svg');
 
-	// Plyr returns an array regardless
+    // Setup type toggle
-	var player = instances[0].plyr;
+    var buttons = document.querySelectorAll('[data-source]'),
+        types = {
+            video:      'video',
+            audio:      'audio',
+            youtube:    'youtube',
+            vimeo:      'vimeo'
+        },
+        currentType = window.location.hash.replace('#', ''),
+        historySupport = (window.history && window.history.pushState);
 
-	// Setup type toggle
+    // Bind to each button
-	var buttons = document.querySelectorAll('[data-source]'),
+    for (var i = buttons.length - 1; i >= 0; i--) {
-		types = {
+        buttons[i].addEventListener('click', function() {
-			video: 		'video',
+            var type = this.getAttribute('data-source');
-			audio: 		'audio',
-			youtube: 	'youtube',
-			vimeo: 		'vimeo'
-		},
-		currentType = window.location.hash.replace('#', ''),
-		historySupport = (window.history && window.history.pushState);
 
-	// Bind to each button
+            newSource(type);
-	for (var i = buttons.length - 1; i >= 0; i--) {
-		buttons[i].addEventListener('click', function() {
-			var type = this.getAttribute('data-source');
 
-			newSource(type);
+            if (historySupport) {
+                history.pushState({ 'type': type }, '', '#' + type);
+            }
+        });
+    }
 
-			if (historySupport) {
+    // List for backwards/forwards
-				history.pushState({ 'type': type }, '', '#' + type);
+    window.addEventListener('popstate', function(event) {
-			}
+        if(event.state && 'type' in event.state) {
-		});
+            newSource(event.state.type);
-	}
+        }
+    });
 
-	// List for backwards/forwards
+    // On load
-	window.addEventListener('popstate', function(event) {
+    if(historySupport) {
-		if(event.state && 'type' in event.state) {
+        var video = !currentType.length;
-			newSource(event.state.type);
-		}
-	});
 
-	// On load
+        // If there's no current type set, assume video
-	if(historySupport) {
+        if(video) {
-		var video = !currentType.length;
+            currentType = types.video;
+        }
 
-		// If there's no current type set, assume video
+        // Replace current history state
-		if(video) {
+        if(currentType in types) {
-			currentType = types.video;
+            history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
-		}
+        }
 
-		// Replace current history state
+        // If it's not video, load the source
-		if(currentType in types) {
+        if(currentType !== types.video) {
-			history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+            newSource(currentType, true);
-		}
+        }
+    }
 
-		// If it's not video, load the source
+    // Toggle class on an element
-		if(currentType !== types.video) {
+    function toggleClass(element, className, state) {
-			newSource(currentType, true);
-		}
-	}
-
-	// Toggle class on an element
-	function toggleClass(element, className, state) {
         if (element) {
             if (element.classList) {
                 element.classList[state ? 'add' : 'remove'](className);
@@ -91,95 +91,95 @@
         }
     }
 
-	// Set a new source
+    // Set a new source
-	function newSource(type, init) {
+    function newSource(type, init) {
-		// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-		if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
+        if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
-			return;
+            return;
-		}
+        }
 
-		switch(type) {
+        switch(type) {
-			case types.video:
+            case types.video:
-				player.source({
+                player.source({
-					type:       'video',
+                    type:       'video',
-					title: 		'View From A Blue Moon',
+                    title:      'View From A Blue Moon',
-					sources: [{
+                    sources: [{
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
-						type:   'video/mp4'
+                        type:   'video/mp4'
-					},
+                    },
-					{
+                    {
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
-						type:   'video/webm'
+                        type:   'video/webm'
-					}],
+                    }],
-					poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                    poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
-					tracks:     [{
+                    tracks:     [{
-						kind:   'captions',
+                        kind:   'captions',
-						label:  'English',
+                        label:  'English',
-						srclang:'en',
+                        srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-						default: true
+                        default: true
-					}]
+                    }]
-				});
+                });
-				break;
+                break;
 
-			case types.audio:
+            case types.audio:
-				player.source({
+                player.source({
-					type:       'audio',
+                    type:       'audio',
-					title: 		'Kishi Bashi – “It All Began With A Burst”',
+                    title:      'Kishi Bashi – “It All Began With A Burst”',
-					sources: [{
+                    sources: [{
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-						type:   'audio/mp3'
+                        type:   'audio/mp3'
-					},
+                    },
-					{
+                    {
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-						type:   'audio/ogg'
+                        type:   'audio/ogg'
-					}]
+                    }]
-				});
+                });
-				break;
+                break;
 
-			case types.youtube:
+            case types.youtube:
-				player.source({
+                player.source({
-					type:       'video',
+                    type:       'video',
-					title: 		'View From A Blue Moon',
+                    title:      'View From A Blue Moon',
-					sources: [{
+                    sources: [{
-				        src:    'bTqVqk7FSmY',
+                        src:    'bTqVqk7FSmY',
-				        type:   'youtube'
+                        type:   'youtube'
-				    }]
+                    }]
-				});
+                });
-				break;
+                break;
 
-			case types.vimeo:
+            case types.vimeo:
-				player.source({
+                player.source({
-					type:       'video',
+                    type:       'video',
-					title: 		'View From A Blue Moon',
+                    title:      'View From A Blue Moon',
-					sources: [{
+                    sources: [{
-				        src:    '143418951',
+                        src:    '143418951',
-				        type:   'vimeo'
+                        type:   'vimeo'
-				    }]
+                    }]
-				});
+                });
-				break;
+                break;
-		}
+        }
 
-		// Set the current type for next time
+        // Set the current type for next time
-		currentType = type;
+        currentType = type;
 
-		// Remove active classes
+        // Remove active classes
-		for (var x = buttons.length - 1; x >= 0; x--) {
+        for (var x = buttons.length - 1; x >= 0; x--) {
-			toggleClass(buttons[x].parentElement, 'active', false);
+            toggleClass(buttons[x].parentElement, 'active', false);
-		}
+        }
 
-		// Set active on parent
+        // Set active on parent
-		toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
+        toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
-	}
+    }
 })();
 
 // Google analytics
 // For demo site (http://[www.]plyr.io) only
 if(document.domain.indexOf('plyr.io') > -1) {
-	(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
+    (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
-	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-	ga('create', 'UA-40881672-11', 'auto');
+    ga('create', 'UA-40881672-11', 'auto');
-	ga('send', 'pageview');
+    ga('send', 'pageview');
 }

demo/src/less/components/examples.less

@@ -21,7 +21,7 @@ video {
 .plyr--audio {
     max-width: @example-width-audio;
 }
-.plyr--video::after {
+.plyr__video-wrapper::after {
     content: "";
     pointer-events: none;
     position: absolute;

package.json

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

readme.md

@@ -41,13 +41,11 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 ## CMS plugins
 
-### [WordPress](https://wordpress.org)
+### [WordPress](https://wordpress.org/plugins/plyr/)
 Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake))
-[Plyr on WordPress](https://wordpress.org/plugins/plyr/)
 
-### [Neos](https://www.neos.io/)
+### [Neos](https://packagist.org/packages/jonnitto/plyr)
 Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
-[Plyr.io for Neos.io](https://packagist.org/packages/jonnitto/plyr)
 
 ## Using package managers
 You can grab the source using one of the following package managers.
@@ -120,7 +118,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/1.8.3/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.8.8/plyr.js"></script>
 ```
 
 ### CSS
@@ -133,16 +131,18 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.8.3/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.8.8/plyr.css">
 ```
 
 ### SVG Sprite
-The SVG sprite is loaded automatically from our CDN. To change this, see the [#options](Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/1.8.3/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN. To change this, see the [#options](Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/1.8.8/plyr.svg`.
 
 ## Advanced
 
 ### LESS & SASS/SCSS
-You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.
+You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should already) as all declerations use the W3C definitions - e.g. `appearance: none;` will be prefixed to `-webkit-appearance: none;` by autoprefixer. 
+
+The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.
 
 ### SVG
 The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
@@ -535,6 +535,11 @@ Here's a list of the methods supported:
     <td>&mdash;</td>
     <td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td>
   </tr>
+  <tr>
+    <td><code>getCurrentTime()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float with the current time in seconds.</td>
+  </tr>
  </tbody>
 </table>
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.8.3
+// plyr.js v1.8.8
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -44,7 +44,7 @@
         displayDuration:        true,
         loadSprite:             true,
         iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/1.8.3/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/1.8.8/plyr.svg',
         clickToPlay:            true,
         hideControls:           true,
         showPosterOnEnd:        false,
@@ -191,7 +191,7 @@
         if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
             isIE = true;
             name = 'IE';
-            fullVersion = '11;';
+            fullVersion = '11';
         }
         // MSIE
         else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
@@ -2979,8 +2979,8 @@
 
                 // On click play, pause ore restart
                 _on(wrapper, 'click', function() {
-                    // Touch devices will just show controls
+                    // Touch devices will just show controls (if we're hiding controls)
-                    if (plyr.browser.isTouch && !plyr.media.paused) {
+                    if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
                         return;
                     }
 
@@ -3264,7 +3264,8 @@
             isFullscreen:       function() { return plyr.isFullscreen || false; },
             support:            function(mimeType) { return _supportMime(plyr, mimeType); },
             destroy:            _destroy,
-            restore:            _init
+            restore:            _init,
+            getCurrentTime:     function() { return plyr.media.currentTime; }
         };
     }
 

src/less/plyr.less

@@ -19,8 +19,7 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
-    overflow: hidden;
+    font-family: @plyr-font-family;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
     direction: ltr;
 
     & when (@plyr-border-box = true) {
@@ -354,7 +353,6 @@
     border-radius: inherit;
     background: @plyr-audio-controls-bg;
     border: @plyr-audio-controls-border;
-    box-shadow: @plyr-audio-controls-box-shadow;
     color: @plyr-audio-control-color;
 
     button {
@@ -371,6 +369,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -378,7 +377,7 @@
     background: @plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+    box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
     transition: all .3s ease;
 
@@ -663,7 +662,6 @@
     display: inline-block;
     vertical-align: middle;
     font-size: @plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {

src/less/variables.less

@@ -11,7 +11,8 @@
 // Colors
 @plyr-color-main:                       #3498db;
 
-// Font sizes
+// Font
+@plyr-font-family:                      'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 @plyr-font-size-small:                  14px;
 @plyr-font-size-base:                   16px;
 
@@ -32,7 +33,6 @@
 @plyr-video-control-bg-hover:           @plyr-color-main;
 @plyr-audio-controls-bg:                #fff;
 @plyr-audio-controls-border:            1px solid #dbe3e8;
-@plyr-audio-controls-box-shadow:        0 1px 1px fade(#000, 5%);
 @plyr-audio-control-color:              #565D64;
 @plyr-audio-control-color-hover:        #fff;
 @plyr-audio-control-bg-hover:           @plyr-color-main;

src/scss/plyr.scss

@@ -19,8 +19,7 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
-    overflow: hidden;
+    font-family: $plyr-font-family;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
     direction: ltr;
 
     @if $plyr-border-box == true {
@@ -354,7 +353,6 @@
     border-radius: inherit;
     background: $plyr-audio-controls-bg;
     border: $plyr-audio-controls-border;
-    box-shadow: $plyr-audio-controls-box-shadow;
     color: $plyr-audio-control-color;
 
     button {
@@ -371,6 +369,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -378,7 +377,7 @@
     background: $plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85);
+    box-shadow: 0 1px 1px transparentize(#000, .85);
     color: $plyr-video-control-color;
     transition: all .3s ease;
 
@@ -662,7 +661,6 @@
     display: inline-block;
     vertical-align: middle;
     font-size: $plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {

src/scss/variables.scss

@@ -13,6 +13,7 @@ $plyr-sr-only-important:                true !default;
 $plyr-color-main:                       #3498db !default;
 
 // Font sizes
+$plyr-font-family:                      'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;
 
@@ -33,7 +34,6 @@ $plyr-video-control-color-hover:        #fff !default;
 $plyr-video-control-bg-hover:           $plyr-color-main !default;
 $plyr-audio-controls-bg:                #fff !default;
 $plyr-audio-controls-border:            1px solid #dbe3e8 !default;
-$plyr-audio-controls-box-shadow:        0 1px 1px transparentize(#000, .95) !default;
 $plyr-audio-control-color:              #565D64 !default;
 $plyr-audio-control-color-hover:        #fff !default;
 $plyr-audio-control-bg-hover:           $plyr-color-main;