<commit_before># Plyr
A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

[Checkout the demo](http://plyr.io)

[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)

## Why?
We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.

## Features
- **Accessible** - full support for VTT captions and screen readers
- **Lightweight** - under 10KB minified and gzipped
- **[Customisable](#html)** - make the player look how you want with the markup you want
- **Semantic** - 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** - as you'd expect these days
- **HTML Video & Audio** - support for both formats
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
- **[API](#api)** - toggle playback, volume, seeking, and more
- **[Universal events](#events)** - no messing around with Vimeo and YouTube APIs, all events are universal across formats
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
- **i18n support** - support for internationalization of controls
- **No dependencies** - written in "vanilla" JavaScript, no jQuery required

Oh and yes, it works with Bootstrap.

## Changelog
Check out the [changelog](changelog.md) to see what's been new with Plyr.

## Planned Development
- Playback speed
- Playlists
- Multiple language captions (with selection)
- Audio captions
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)

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.9/plyr.js` to `https://cdn.plyr.io/1.5.9/plyr.js`

### Node Package Manager (NPM)
Using NPM, you can grab Plyr:
```
npm install plyr
```
[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)

### Bower
If bower is your thang, you can grab Plyr using:
```
bower install plyr
```
[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)

More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)

### Ember
The awesome [@louisrudner](https://twitter.com/louisrudner) has created an ember component, available by running:
```
ember addon:install ember-cli-plyr
```
More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr)

### CDN
If you want to use our CDN, you can use the following:

```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.9/plyr.css">
<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script>
```

You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.9/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.

```html
<link rel="stylesheet" href="dist/plyr.css">
```

The default setup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options. Check out the source for more on this.

### SVG
The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`, before any other scripts.

```html
<script>
(function(d, p){
	var a = new XMLHttpRequest(),
		b = d.body;
	a.open('GET', p, true);
	a.send();
	a.onload = function() {
		var c = d.createElement('div');
		c.setAttribute('hidden', '');
		c.innerHTML = a.responseText;
		b.insertBefore(c, b.childNodes[0]);
	};
})(document, 'path/to/sprite.svg');
</script>
```

If you're using the `<base>` tag on your site, you may need to use something like this:
[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
<commit_msg>Fix the svgfixer.js link<commit_after># Plyr
A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

[Checkout the demo](http://plyr.io)

[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)

## Why?
We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.

## Features
- **Accessible** - full support for VTT captions and screen readers
- **Lightweight** - under 10KB minified and gzipped
- **[Customisable](#html)** - make the player look how you want with the markup you want
- **Semantic** - 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** - as you'd expect these days
- **HTML Video & Audio** - support for both formats
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
- **[API](#api)** - toggle playback, volume, seeking, and more
- **[Universal events](#events)** - no messing around with Vimeo and YouTube APIs, all events are universal across formats
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
- **i18n support** - support for internationalization of controls
- **No dependencies** - written in "vanilla" JavaScript, no jQuery required

Oh and yes, it works with Bootstrap.

## Changelog
Check out the [changelog](changelog.md) to see what's been new with Plyr.

## Planned Development
- Playback speed
- Playlists
- Multiple language captions (with selection)
- Audio captions
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)

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.9/plyr.js` to `https://cdn.plyr.io/1.5.9/plyr.js`

### Node Package Manager (NPM)
Using NPM, you can grab Plyr:
```
npm install plyr
```
[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)

### Bower
If bower is your thang, you can grab Plyr using:
```
bower install plyr
```
[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)

More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)

### Ember
The awesome [@louisrudner](https://twitter.com/louisrudner) has created an ember component, available by running:
```
ember addon:install ember-cli-plyr
```
More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr)

### CDN
If you want to use our CDN, you can use the following:

```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.9/plyr.css">
<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script>
```

You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.9/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.

```html
<link rel="stylesheet" href="dist/plyr.css">
```

The default setup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options. Check out the source for more on this.

### SVG
The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`, before any other scripts.

```html
<script>
(function(d, p){
	var a = new XMLHttpRequest(),
		b = d.body;
	a.open('GET', p, true);
	a.send();
	a.onload = function() {
		var c = d.createElement('div');
		c.setAttribute('hidden', '');
		c.innerHTML = a.responseText;
		b.insertBefore(c, b.childNodes[0]);
	};
})(document, 'path/to/sprite.svg');
</script>
```

If you're using the `<base>` tag on your site, you may need to use something like this:
[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)

{'fraction_non_alphanumeric': 0.143301834352418, 'fraction_numerical': 0.007782101167315175, 'mean_word_length': 4.326228537596211, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, 'https://': 26, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4681952', 'n_tokens_mistral': 3063, 'n_tokens_neox': 2868, 'n_words': 1059}