Version bump

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.5.18",
+  "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

@@ -28,6 +28,7 @@ Oh and yes, it works with Bootstrap.
 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 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.18/plyr.js` to `https://cdn.plyr.io/1.5.18/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.18/plyr.css">
-<script src="https://cdn.plyr.io/1.5.18/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.18/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.18/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.20/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -772,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("ready", function() {
-  /* Magic happens */
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
 });
 ```
 
@@ -781,6 +785,28 @@ document.querySelector(".js-plyr").addEventListener("ready", 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.

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.18
+// plyr.js v1.5.20
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -1319,12 +1319,6 @@
                 // Clean up
                 plyr.embedId = null;
             }
-            else {
-                // Autoplay
-                if (config.autoplay) {
-                    _play();
-                }
-            }
         }
 
         // Setup YouTube/Vimeo
@@ -1415,14 +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
@@ -1438,7 +1432,7 @@
             plyr.embed = new YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay: plyr.autoplay ? 1 : 0,
+                    autoplay: (config.autoplay ? 1 : 0),
                     controls: (plyr.supported.full ? 0 : 1),
                     rel: 0,
                     showinfo: 0,
@@ -1626,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');
+                }
             });
         }
 
@@ -2277,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) {
@@ -2301,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);
@@ -2329,11 +2325,6 @@
                 _displayDuration();
             }
 
-            // Play if autoplay attribute is present
-            if (config.autoplay) {
-                _play();
-            }
-
             // Set aria title and iframe title
             config.title = source.title;
             _setTitle();
@@ -2668,6 +2659,11 @@
 
                 // Set title on button and frame
                 _setTitle();
+
+                // Autoplay
+                if (config.autoplay) {
+                    _play();
+                }
             }
 
             // Successful setup