Version bump

Dynamically set YouTube autoplay from config

changelog.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## v1.5.18
+- Added 'ready' event for initial setup complete or source change occurs
+- Fixed SASS stylesheet references to transparentize
+- Added default font stack to controls 
+- Docs fixes inc controls HTML (fixes #180)
+
+## v1.5.17
+- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
+- Auto set title based on YouTube getVideoData() title property
+- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
+
+## v1.5.16
+- Cancel requests on source change (Fixes #174)
+
+## v1.5.15
+- Fix for CustomEvent polyfill and related bug (See #172)
+
+## v1.5.14
+- Volume storage fix (Fixes #171)
+
+## v1.5.13
+- Fix for manual caption rendering
+
+## v1.5.12
+- Added a duration option to pass the duration of the file
+- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
+- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
+- Firefox bug fix for event not defined
+
 ## v1.5.11
 - iOS embed bug fixes (fixes #166)
 - Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)

controls.md

@@ -81,11 +81,11 @@ var controls = ["<div class='plyr__controls'>",
         "</button>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Current time</span>",
-            "<span class='plyr__current-time'>00:00</span>",
+            "<span class='plyr__time--curent'>00:00</span>",
         "</span>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Duration</span>",
-            "<span class='plyr__duration'>00:00</span>",
+            "<span class='plyr__time--duration'>00:00</span>",
         "</span>",
     "</span>",
     "<span class='plyr__controls--right'>",

gulpfile.js

@@ -214,8 +214,10 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
-    localpath   = new RegExp("(\.\.\/)?dist", "gi");
+    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
+    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    semver          = new RegExp("v" + regex, "gi"),
+    localpath       = new RegExp("(\.\.\/)?dist", "gi");
 }
 
 // Publish version to CDN bucket
@@ -244,6 +246,11 @@ gulp.task("docs", function () {
         .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
         .pipe(gulp.dest(root));
 
+    // Replace versioned files in plyr.js
+    gulp.src(path.join(root, "src/js/plyr.js"))
+        .pipe(replace(semver, "v" + version))
+        .pipe(gulp.dest(path.join(root, "src/js/")));
+
     // Replace local file paths with remote paths in docs
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
     gulp.src([paths.docs.root + "*.html"])

package.json

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

readme.md

@@ -1,9 +1,9 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
 
-[Checkout the demo](http://plyr.io)
+[Checkout the demo](https://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](https://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -25,9 +25,10 @@ We wanted a lightweight, accessible and customizable media player that supports
 Oh and yes, it works with Bootstrap.
 
 ## Changelog
-Check out the [changelog](changelog.md) to see what's been new with Plyr.
+Check out the [changelog](changelog.md) to see what's new with Plyr.
 
 ## Planned Development
+- Streaming
 - Playback speed
 - Playlists
 - Multiple language captions (with selection)
@@ -37,12 +38,13 @@ Check out the [changelog](changelog.md) to see what's been new with Plyr.
 If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
 
 ## 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.5.14/plyr.js` to `https://cdn.plyr.io/1.5.14/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.5.20/plyr.js` to `https://cdn.plyr.io/1.5.20/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:
 ```
 npm install plyr
@@ -50,6 +52,8 @@ 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:
 ```
 bower install plyr
@@ -69,11 +73,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.5.14/plyr.css">
-<script src="https://cdn.plyr.io/1.5.14/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.20/plyr.css">
+<script src="https://cdn.plyr.io/1.5.20/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.14/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.20/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.sass` file included in `/src` in your build to save a request.
@@ -175,7 +179,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.5.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.20/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -675,7 +679,7 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information.</td>
 	</tr>
 	<tr>
-		<td><code>loadeddata/code></td>
+		<td><code>loadeddata</code></td>
 		<td>✔</td>
 		<td>The first frame of the media has finished loading.</td>
 	</tr>
@@ -759,6 +763,11 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td></td>
 		<td>Captions toggled off</td>
 	</tr>
+	<tr>
+		<td><code>ready</code></td>
+		<td></td>
+		<td>Triggered when initial setup is done or a source change has occurred.</td>
+	</tr>
 	</tbody>
 </table>
 
@@ -767,8 +776,8 @@ Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Event
 Here's an example of binding an event listener:
 
 ```javascript
-document.querySelector(".js-plyr").addEventListener("playing", function() {
-  /* Magic happens */
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
 });
 ```
 
@@ -776,6 +785,28 @@ document.querySelector(".js-plyr").addEventListener("playing", function() {
 
 YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.
 
+Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.
+
+The native API's can be accessed through the `embed` property of the plyr object. For example:
+
+```javascript
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
+
+	// YouTube
+	console.log(player.embed.getVideoData());
+
+	// Vimeo
+	console.log(player.embed.api('getColor'));
+});
+```
+
+More info on the respective API's here:
+[YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
+[Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
+
+*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
+
 ## Fullscreen
 
 Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `plyr-fullscreen` class to your container.
@@ -842,6 +873,8 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 
 ## Used by
 - [Selz.com](https://selz.com)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
 
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.3
+// plyr.js v1.5.20
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -133,7 +133,7 @@
         // URLs
         urls: {
             vimeo: {
-                api:            'https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
+                api:            'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js',
             },
             youtube: {
                 api:            'https://www.youtube.com/iframe_api'
@@ -1242,7 +1242,7 @@
 
         // Toggle style hook
         function _toggleStyleHook() {
-            _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+            _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
         }
 
         // Toggle native controls
@@ -1319,12 +1319,6 @@
                 // Clean up
                 plyr.embedId = null;
             }
-            else {
-                // Autoplay
-                if (config.autoplay) {
-                    _play();
-                }
-            }
         }
 
         // Setup YouTube/Vimeo
@@ -1415,11 +1409,14 @@
 
         // When embeds are ready
         function _embedReady() {
-            // Setup the UI
-            _setupInterface();
-
             // Set title
             _setTitle(_getElement('iframe'));
+
+            // Store reference to API
+            plyr.container.plyr.embed = plyr.embed;
+
+            // Setup the UI
+            _setupInterface();
         }
 
         // Handle YouTube API ready
@@ -1435,7 +1432,7 @@
             plyr.embed = new YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay: 0,
+                    autoplay: (config.autoplay ? 1 : 0),
                     controls: (plyr.supported.full ? 0 : 1),
                     rel: 0,
                     showinfo: 0,
@@ -1470,6 +1467,9 @@
                         plyr.media.currentTime = instance.getCurrentTime();
                         plyr.media.muted = instance.isMuted();
 
+                        // Set title
+                        config.title = instance.getVideoData().title;
+
                         // Trigger timeupdate
                         _triggerEvent(plyr.media, 'timeupdate');
 
@@ -1620,12 +1620,12 @@
                 });
 
                 // Always seek to 0
-                //plyr.embed.api('seekTo', 0);
+                // plyr.embed.api('seekTo', 0);
 
-                // Prevent autoplay if needed (seek will play)
-                //if (!config.autoplay) {
-                //    plyr.embed.api('pause');
-                //}
+                // Autoplay
+                if (config.autoplay) {
+                    plyr.embed.api('play');
+                }
             });
         }
 
@@ -2225,6 +2225,12 @@
                 _remove(plyr.videoContainer);
             }
 
+            // Remove embed object
+            plyr.embed = null;
+
+            // Cancel current network requests
+            _cancelRequests();
+
             // Remove the old media
             _remove(plyr.media);
 
@@ -2265,6 +2271,11 @@
             // Inject the new element
             _prependChild(plyr.container, plyr.media);
 
+            // Autoplay the new source?
+            if (typeof source.autoplay !== 'undefined') {
+                config.autoplay = source.autoplay;
+            }
+
             // Set attributes for audio video
             if (_inArray(config.types.html5, plyr.type)) {
                 if (config.crossorigin) {
@@ -2289,9 +2300,6 @@
             _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
             _toggleStyleHook();
 
-            // Autoplay the new source?
-            config.autoplay = (source.autoplay || config.autoplay);
-
             // Set new sources for html5
             if (_inArray(config.types.html5, plyr.type)) {
                 _insertChildElements('source', source.sources);
@@ -2317,18 +2325,11 @@
                 _displayDuration();
             }
 
-            // 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();
-            }
+            config.title = source.title;
+            _setTitle();
 
-            // Reset media object
+            // Reset media objects
             plyr.container.plyr.media = plyr.media;
         }
 
@@ -2521,6 +2522,31 @@
             });
         }
 
+        // Cancel current network requests
+        // See https://github.com/Selz/plyr/issues/174
+        function _cancelRequests() {
+            if(!_inArray(config.types.html5, plyr.type)) {
+                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]);
+            }
+
+            // Load the new empty source
+            // This will cancel existing requests
+            // See https://github.com/Selz/plyr/issues/174
+            plyr.media.load();
+
+            // Debugging
+            _log("Cancelled network requests for old media");
+        }
+
         // Destroy an instance
         // Event listeners are removed when elements are removed
         // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
@@ -2547,7 +2573,7 @@
 
             // If video, we need to remove some more
             if (plyr.type === 'video') {
-                // Remove captions
+                // Remove captions container
                 _remove(_getElement(config.selectors.captions));
 
                 // Remove video wrapper
@@ -2633,6 +2659,11 @@
 
                 // Set title on button and frame
                 _setTitle();
+
+                // Autoplay
+                if (config.autoplay) {
+                    _play();
+                }
             }
 
             // Successful setup
@@ -2695,6 +2726,9 @@
 
             // Display duration
             _displayDuration();
+
+            // Ready event
+            _triggerEvent(plyr.container, 'ready');
         }
 
         // Initialize instance
@@ -2833,16 +2867,18 @@
 // Custom event polyfill
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
+    if (typeof window.CustomEvent === 'function') {
+        return false;
+    }
+
     function CustomEvent (event, params) {
         params = params || { bubbles: false, cancelable: false, detail: undefined };
         var evt = document.createEvent('CustomEvent');
-        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
         return evt;
     }
 
     CustomEvent.prototype = window.Event.prototype;
 
-    if(!('CustomEvent' in window)) {
-        window.CustomEvent = CustomEvent;
-    }
+    window.CustomEvent = CustomEvent;
 })();

src/less/plyr.less

@@ -11,7 +11,7 @@
 @plyr-gray-dark:                     #343F4A;
 @plyr-gray:                          #565D64;
 @plyr-gray-light:                    #6B7D86;
-@plyr-gray-lighter:                 #CBD0D3;
+@plyr-gray-lighter:                  #CBD0D3;
 @plyr-off-white:                     #D6DADD;
 
 // Font sizes
@@ -130,6 +130,7 @@
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/

src/sass/plyr.scss

@@ -44,8 +44,8 @@ $plyr-control-bg-hover:              $plyr-blue !default;
 
 // Tooltips
 $plyr-tooltip-bg:                    $plyr-controls-bg !default;
-$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .1) !default;
-$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .2) !default;
+$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .9) !default;
+$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .8) !default;
 
 $plyr-tooltip-border-width:          1px;
 $plyr-tooltip-shadow:                0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
@@ -55,11 +55,11 @@ $plyr-tooltip-arrow-size:            6px !default;
 $plyr-tooltip-radius:                3px !default;
 
 // Progress
-$plyr-progress-bg:                   transparentize($plyr-gray, .2) !default;
+$plyr-progress-bg:                   transparentize($plyr-gray, .8) !default;
 $plyr-progress-playing-bg:           $plyr-blue !default;
-$plyr-progress-buffered-bg:          transparentize($plyr-gray, .25) !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
 $plyr-progress-loading-size:         40px !default;
-$plyr-progress-loading-bg:           transparentize(#000, .15) !default;
+$plyr-progress-loading-bg:           transparentize(#000, .85) !default;
 
 // Volume
 $plyr-volume-track-height:           6px !default;
@@ -130,6 +130,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -218,7 +219,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         span {
             border-radius: 2px;
             padding: 3px 10px;
-            background: transparentize(#000, .9);
+            background: transparentize(#000, .1);
         }
         span:empty {
             display: none;
@@ -243,7 +244,7 @@ $plyr-bp-captions-large:             768px !default; // When captions jump to th
         background: $plyr-controls-bg;
         line-height: 1;
         text-align: center;
-        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
+        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
 
         // Clear floats
         &::after {