Fix references to new property values

Author: devcshort

README.md

@@ -1,56 +1,54 @@
 # React HLS Player V1
+
 ![NPM Downloads](https://img.shields.io/npm/dm/react-hls-player?style=flat-square)
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/react-hls-player)
+![npm bundle size](https://img.shields.io/bundlephobia/min/react-hls-player)
 
-## Pre-Intro
+## Overview
 
-This is the official release of React HLS Player V1. I originally forked this project so I could fix some underlying issues that I was running in to and the original project was no longer being maintained. Since then, this project has seen a gradual increase of usage, and I've decided on maintaining and improving it for the long term. This V1 release is a rewrite of the original, includes Typescript definitions to take advantage of VSCode's intellisense, and has completely migrated to Webpack from Parcel.
+V2 is now out and includes better TypeScript support. I had to make a large jump from the previous V1 as this new version included a couple small breaking changes, primarily to the way props are named. One big difference, is that the component now accepts all video element props in the formatting you would expect them with (previously autoPlay was passed as autoplay, and various other props weren't being handled properly). We're also using `src` instead of `url` to provide the source to the underlying video player.
 
-This project will continue to be a work in progress, and I will always welcome PRs, issues, and recommendations. I'll continue to look for better ways of handling things, as well as look for ways to improve and add on to this module.
+As always, PRs, issues and recommendations are always welcome.
 
 ## Introduction
 
-`react-hls-player` is a simple hls/rtmp live stream player.
+`react-hls-player` is a simple HLS live stream player.
 It uses [hls.js](https://github.com/video-dev/hls.js) to play your hls live stream if your browser supports `html 5 video` and `MediaSource Extension`.
 
 ## Examples
 
 ```javascript
-// General Usage
-<ReactHlsPlayer
-    url='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
-    autoplay={false}
-    controls={true}
-    width={500}
-    height={375}
-/>
-```
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactHlsPlayer from 'react-hls-player';
 
-```javascript
-// Responsive
-<ReactHlsPlayer
-    url='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
-    autoplay={false}
+// General Usage
+ReactDOM.render(
+  <ReactHlsPlayer
+    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
+    autoPlay={false}
     controls={true}
     width="100%"
     height="auto"
-/>
+  />,
+  document.getElementById('app')
+);
 ```
+
 ## Props
 
 All [video properties](https://www.w3schools.com/tags/att_video_poster.asp) are supported and passed down to the underlying video component
 
-Prop | Description
------------- | -------------
-style `Object` | React CSS properties
-className `String` | Custom classes
-url `String`, `required` | The hls url that you want to play
-autoplay `Boolean` | Autoplay when component is ready. Defaults to `false`
-controls `Boolean` | Whether or not to show the playback controls. Defaults to `false`
-width `Number` | Video width. Defaults to `100%`
-height `Number` | Video height. Defaults to `auto`
-hlsConfig `Object` | `hls.js` config, you can see all config [here](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning)
-playerRef `React Ref` | Pass in your own ref to interact with the video player directly. This will override the default ref.
+| Prop                     | Description                                                                                                             |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| src `String`, `required` | The hls url that you want to play                                                                                       |
+| autoPlay `Boolean`       | Autoplay when component is ready. Defaults to `false`                                                                   |
+| controls `Boolean`       | Whether or not to show the playback controls. Defaults to `false`                                                       |
+| width `Number`           | Video width. Defaults to `100%`                                                                                         |
+| height `Number`          | Video height. Defaults to `auto`                                                                                        |
+| hlsConfig `Object`       | `hls.js` config, you can see all config [here](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) |
+| playerRef `React Ref`    | Pass in your own ref to interact with the video player directly. This will override the default ref.                    |
 
 ### Additional Notes
 
@@ -72,6 +70,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!