diff --git a/README.md b/README.md index ce6df8d7..21ef8803 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi - 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required - 💁‍♀️ **Sass** - to include in your build processes -### Demos +## Demos You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO) @@ -117,7 +117,7 @@ Or the `
` non progressively enhanced method: You can use Plyr as an ES6 module as follows: -```javascript +```js import Plyr from 'plyr'; const player = new Plyr('#player'); @@ -132,7 +132,7 @@ Alternatively you can include the `plyr.js` script before the closing `` ``` -See [initialising](#initialising) for more information on advanced setups. +See [initialising](#initializing) for more information on advanced setups. You can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build. @@ -310,7 +310,7 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab ## JavaScript -### Initialising +### Initializing You can specify a range of arguments for the constructor to use: @@ -324,17 +324,17 @@ _Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element Passing a CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector): -```javascript +```js const player = new Plyr('#player'); ``` Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement): -```javascript +```js const player = new Plyr(document.getElementById('player')); ``` -```javascript +```js const player = new Plyr(document.querySelector('.js-player')); ``` @@ -344,13 +344,13 @@ The HTMLElement or string selector can be the target `