diff options
Diffstat (limited to 'readme.md')
| -rw-r--r-- | readme.md | 43 |
1 files changed, 21 insertions, 22 deletions
@@ -1,6 +1,6 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers. -[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr-chat) - [](https://badge.fury.io/js/plyr) +[Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat) - [](https://badge.fury.io/js/plyr) [](https://plyr.io) @@ -8,7 +8,7 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi - 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats - 💪 **Accessible** - full support for VTT captions and screen readers -- 🔧 **[Customisable](#html)** - make the player look how you want with the markup you want +- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want - 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks - 📱 **Responsive** - works with any screen size @@ -116,7 +116,7 @@ import Plyr from 'plyr'; const player = new Plyr('#player'); ``` -Alertnatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below. +Alternatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below. ```html <script src="path/to/plyr.js"></script> @@ -130,13 +130,13 @@ See [initialising](#initialising) for more information on advanced setups. You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build. ```html -<script src="https://cdn.plyr.io/3.5.5/plyr.js"></script> +<script src="https://cdn.plyr.io/3.5.7-beta.0/plyr.js"></script> ``` ...or... ```html -<script src="https://cdn.plyr.io/3.5.5/plyr.polyfilled.js"></script> +<script src="https://cdn.plyr.io/3.5.7-beta.0/plyr.polyfilled.js"></script> ``` ## CSS @@ -150,13 +150,13 @@ Include the `plyr.css` stylsheet into your `<head>`. If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following: ```html -<link rel="stylesheet" href="https://cdn.plyr.io/3.5.5/plyr.css" /> +<link rel="stylesheet" href="https://cdn.plyr.io/3.5.7-beta.0/plyr.css" /> ``` ## SVG Sprite The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For -reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.5/plyr.svg`. +reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.7-beta.0/plyr.svg`. # Ads @@ -276,7 +276,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke | `enabled` | Boolean | `true` | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below. | | `debug` | Boolean | `false` | Display debugging information in the console | | `controls` | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [controls.md](controls.md) for more info on how the html needs to be structured. | -| `settings` | Array | `['captions', 'quality', 'speed', 'loop']` | If you're using the default controls are used then you can specify which settings to show in the menu | +| `settings` | Array | `['captions', 'quality', 'speed', 'loop']` | If the default controls are used, you can specify which settings to show in the menu | | `i18n` | Object | See [defaults.js](/src/js/config/defaults.js) | Used for internationalization (i18n) of the text within the UI. | | `loadSprite` | Boolean | `true` | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself. | | `iconUrl` | String | `null` | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info. | @@ -629,16 +629,16 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http Plyr supports the last 2 versions of most _modern_ browsers. -| Browser | Supported | -| ------------- | ------------- | -| Safari | ✓ | -| Mobile Safari | ✓¹ | -| Firefox | ✓ | -| Chrome | ✓ | -| Opera | ✓ | -| Edge | ✓ | -| IE11 | ✓³ | -| IE10 | ✓²³ | +| Browser | Supported | +| ------------- | --------------- | +| Safari | ✓ | +| Mobile Safari | ✓¹ | +| Firefox | ✓ | +| Chrome | ✓ | +| Opera | ✓ | +| Edge | ✓ | +| IE11 | ✓³ | +| IE10 | ✓<sup>2,3</sup> | 1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide. 2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)). @@ -682,10 +682,11 @@ Some awesome folks have made plugins for CMSs and Components for JavaScript fram | --------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | WordPress | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/) | | Angular | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv)) | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr) | -| React | Jose Miguel Bejarano ([@xDae](https://github.com/xDae)) | [https://github.com/xDae/react-plyr](https://github.com/xDae/react-plyr) | +| React | Chintan Prajapati ([@chintan9](https://github.com/chintan9)) | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react) | | Vue | Gabe Dunn ([@redxtech](https://github.com/redxtech)) | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr) | | Neos | Jon Uhlmann ([@jonnitto](https://github.com/jonnitto)) | [https://packagist.org/packages/jonnitto/plyr](https://packagist.org/packages/jonnitto/plyr) | | Kirby | Dominik Pschenitschni ([@dpschen](https://github.com/dpschen)) | [https://github.com/dpschen/kirby-plyrtag](https://github.com/dpschen/kirby-plyrtag) | +| REDAXO | FriendsOfRedaxo / skerbis ([@skerbis](https://friendsofredaxo.github.io)) | [https://github.com/FriendsOfREDAXO/plyr](https://github.com/FriendsOfREDAXO/plyr) | # Issues @@ -734,9 +735,7 @@ If you want to be added to the list, open a pull request. It'd be awesome to see # Useful links and credits -Credit to the PayPal HTML5 Video player from which Plyr's caption functionality was originally ported from: - -- [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player) +- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player) - [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw) # Thanks |