+
```
@@ -144,16 +144,43 @@ More info on CORS here:
[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
### JavaScript
-Much of the behaviour of the player is configurable when initialising the library. Here's an example of a default setup:
+
+#### Quick setup
+
+Here's an example of a default setup:
```html
-
+
```
+This will look for all elements with the `plyr` classname and setup plyr on each element found. You can specify other options, including a different selector hook below.
+
+You can initialise the player a few other ways:
+
+Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
+```javascript
+plyr.setup(document.querySelectorAll('.js-plyr'), options);
+```
+
+Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):
+```javascript
+plyr.setup(document.querySelector('.js-plyr'), options);
+```
+
+Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll):
+```javascript
+plyr.setup('.js-plyr', options);
+```
+
+Passing just the options object:
+```javascript
+plyr.setup(options);
+```
+
#### Options
-You can pass the following options to the setup method using `plyr.setup({...})`.
+Options must be passed as an object to the `setup()` method as above.
@@ -235,7 +262,7 @@ You can pass the following options to the setup method using `plyr.setup({...})`
selectors |
Object |
— |
- See plyr.js in /src for more info. The only option you might want to change is player which is the hook used for Plyr, the default is .player. |
+ See plyr.js in /src for more info. The only option you might want to change is container which is the hook used for `setup()`, the default is .plyr. |
classes |
@@ -272,10 +299,27 @@ You can pass the following options to the setup method using `plyr.setup({...})`
## API
-A `plyr` object is added to any element that Plyr is initialised on. You can then control the player by accessing methods in the `plyr` object. For example if you wanted to pause Plyr:
+#### Fetching the plyr instance
+A `plyr` object is added to any element that Plyr is initialised on. You can then control the player by accessing methods in the `plyr` object.
+
+There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-plyr`) like so:
```javascript
-document.querySelectorAll(".player")[0].plyr.pause();
+var player = document.querySelector('.js-plyr');
+```
+
+Or you can use the returned object from your call to the setup method:
+
+```javascript
+var player = plyr.setup('.js-plyr')[0];
+```
+
+This will return an array of plyr instances setup, so you need to specify the index of the instance you want. This is less useful if you are setting up mutliple instances. You can also use the `onSetup` callback documented below which will return each instance one by one, as they are setup.
+
+Once you have your instance, you can use the API methods below on it. For example to pause it:
+
+```javascript
+player.pause();
```
Here's a list of the methods supported:
@@ -395,7 +439,7 @@ Here's a list of the methods supported:
The `plyr` object on the player element also contains a `media` property which is a reference to the `