Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 30d6a0cd5f | |||
| b2ffd7d3ca | |||
| 245a5ef3d7 | |||
| 5d858344f4 | |||
| fea7ed96b3 | |||
| fdc0197433 | |||
| 044bcb359e | |||
| 18dfc17439 | |||
| 35ac236a00 | |||
| dd17100a53 | |||
| f8b4622093 | |||
| 1216968c60 | |||
| 1d2bd227f1 |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.12",
|
||||
"version": "1.0.16",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"keywords": [
|
||||
|
||||
13
changelog.md
13
changelog.md
@ -1,5 +1,18 @@
|
||||
# Changelog
|
||||
|
||||
## v1.0.16
|
||||
- Aria label is now dynamic
|
||||
|
||||
## v1.0.15
|
||||
- Fix for seek time display in controls
|
||||
- More documentation for controls html
|
||||
|
||||
## v1.0.14
|
||||
- Minor change for bootstrap compatibility
|
||||
|
||||
## v1.0.13
|
||||
- Minor tweaks
|
||||
|
||||
## v1.0.12
|
||||
- Handle native events (Issue #34)
|
||||
|
||||
|
||||
81
controls.md
Normal file
81
controls.md
Normal file
@ -0,0 +1,81 @@
|
||||
# Controls HTML
|
||||
|
||||
This is the markup that is rendered for the Plyr controls. The reason it's a seperate option is to allow full customization of markup based on your needs. It's a pet hate of other libraries that use `<a href="#">` or `<span>`s as buttons!
|
||||
|
||||
The default Plyr setup uses a Hogan template. The reason being to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. Alternatively just use the vanilla HTML below.
|
||||
|
||||
## Requirements
|
||||
|
||||
The classes and data attributes used in your template should match the `selectors` option.
|
||||
|
||||
You need to add several placeholders to your html template that are replaced when rendering:
|
||||
|
||||
- `{id}` - the dynamically generated ID for the player (for form controls)
|
||||
- `{seektime}` - the seek time specified in options for fast forward and rewind
|
||||
|
||||
Currently all buttons and inputs need to be present for Plyr to work but later we'll make it more dynamic so if you omit a button or input, it'll still work.
|
||||
|
||||
## Vanilla HTML template
|
||||
|
||||
You can of course, just specify vanilla HTML. Here's an example snippet:
|
||||
|
||||
```html
|
||||
var controls = [
|
||||
'<div class="player-controls">',
|
||||
'<div class="player-progress">',
|
||||
'<progress class="player-progress-played" max="100" value="0">',
|
||||
'<span>0</span>% played',
|
||||
'</progress>',
|
||||
'<progress class="player-progress-buffer" max="100" value="0">',
|
||||
'<span>0</span>% buffered',
|
||||
'</progress>',
|
||||
'</div>',
|
||||
'<span class="player-controls-playback">',
|
||||
'<button type="button" data-player="restart">',
|
||||
'<svg><use xlink:href="#icon-refresh"></use></svg>',
|
||||
'<span class="sr-only">Restart</span>',
|
||||
'</button>',
|
||||
'<button type="button" data-player="rewind">',
|
||||
'<svg><use xlink:href="#icon-rewind"></use></svg>',
|
||||
'<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>',
|
||||
'</button>',
|
||||
'<button type="button" data-player="play">',
|
||||
'<svg><use xlink:href="#icon-play"></use></svg>',
|
||||
'<span class="sr-only">Play</span>',
|
||||
'</button>',
|
||||
'<button type="button" data-player="pause">',
|
||||
'<svg><use xlink:href="#icon-pause"></use></svg>',
|
||||
'<span class="sr-only">Pause</span>',
|
||||
'</button>',
|
||||
'<button type="button" data-player="fast-forward">',
|
||||
'<svg><use xlink:href="#icon-fast-forward"></use></svg>',
|
||||
'<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>',
|
||||
'</button>',
|
||||
'<span class="player-time">',
|
||||
'<span class="sr-only">Time</span>',
|
||||
'<span class="player-duration">00:00</span>',
|
||||
'</span>',
|
||||
'</span>',
|
||||
'<span class="player-controls-sound">',
|
||||
'<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">',
|
||||
'<label id="mute{id}" for="mute{id}">',
|
||||
'<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>',
|
||||
'<svg><use xlink:href="#icon-sound"></use></svg>',
|
||||
'<span class="sr-only">Mute</span>',
|
||||
'</label>',
|
||||
'<label for="volume{id}" class="sr-only">Volume</label>',
|
||||
'<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">',
|
||||
'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">',
|
||||
'<label for="captions{id}">',
|
||||
'<svg><use xlink:href="#icon-bubble"></use></svg>',
|
||||
'<span class="sr-only">Captions</span>',
|
||||
'</label>',
|
||||
'<button type="button" data-player="fullscreen">',
|
||||
'<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>',
|
||||
'<svg><use xlink:href="#icon-expand"></use></svg>',
|
||||
'<span class="sr-only">Toggle fullscreen</span>',
|
||||
'</button>',
|
||||
'</span>',
|
||||
'</div>'
|
||||
].join("\n");
|
||||
```
|
||||
2
dist/css/plyr.css
vendored
2
dist/css/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/js/docs.js
vendored
2
dist/js/docs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/plyr.js
vendored
2
dist/js/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/templates.js
vendored
2
dist/js/templates.js
vendored
@ -1,2 +1,2 @@
|
||||
var templates = {};
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">{seektime}</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
|
||||
10
index.html
10
index.html
@ -70,15 +70,5 @@
|
||||
|
||||
<!-- Docs setup -->
|
||||
<script src="dist/js/docs.js"></script>
|
||||
|
||||
<!-- GA -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-40881672-11', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.0.12",
|
||||
"version": "1.0.16",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
|
||||
77
readme.md
77
readme.md
@ -11,7 +11,8 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
||||
- **Lightweight** - just 4.8KB minified and gzipped.
|
||||
- **Customisable** - make the player look how you want with the markup you want.
|
||||
- **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress.
|
||||
- **No dependencies** - written in native JS.
|
||||
- **Responsive** - any screen size.
|
||||
- **No dependencies** - written in vanilla JavaScript.
|
||||
- **API** - easy to use API.
|
||||
- **Fallback** - if there's no support, the native players are used.
|
||||
- **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.
|
||||
@ -23,6 +24,7 @@ Check out [the changelog](changelog.md)
|
||||
- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
|
||||
- Accept a selector for the `html` template property.
|
||||
- Multiple language captions (with selection)
|
||||
- Localisation of control labels
|
||||
|
||||
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.
|
||||
|
||||
@ -36,10 +38,10 @@ bower install plyr
|
||||
More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
|
||||
|
||||
### CSS
|
||||
If you want to use the default css, add the css file from /dist into your head, or even better use the less file included in /assets in your build to save a request.
|
||||
If you want to use the default css, add the css file from /dist into your head, or even better use the less file included in `/src` in your build to save a request.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/css/plyr.css" />
|
||||
<link rel="stylesheet" href="dist/css/plyr.css">
|
||||
```
|
||||
|
||||
### SVG
|
||||
@ -58,7 +60,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
c.innerHTML=a.responseText;
|
||||
b.insertBefore(c,b.childNodes[0])
|
||||
}
|
||||
})(document,"/svg/sprite.svg");
|
||||
})(document,"dist/svg/sprite.svg");
|
||||
</script>
|
||||
```
|
||||
More info on SVG sprites here:
|
||||
@ -112,14 +114,15 @@ More info on CORS here:
|
||||
Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
|
||||
|
||||
```html
|
||||
<script src="js/plyr.js"></script>
|
||||
<script src="dist/js/plyr.js"></script>
|
||||
<script>
|
||||
plyr.setup({
|
||||
html: **your controls html**
|
||||
});
|
||||
</script>
|
||||
```
|
||||
You can pass the following settings:
|
||||
|
||||
#### Options
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
@ -141,11 +144,7 @@ You can pass the following settings:
|
||||
<td><code>html</code></td>
|
||||
<td>String</td>
|
||||
<td><code>—</code></td>
|
||||
<td>This is **required**. It is the markup used for the controls. In the demo, we use Hogan templates as we are already using them. You can of course, just specify vanilla html. The only requirement is your selectors should match the `selectors` option below. If you check `controls.html` in `/assets/templates` to get an idea of how the default html works.
|
||||
|
||||
You need to add two placeholders to your html template:
|
||||
- {id} for the dynamically generated ID for the player (for form controls)
|
||||
- {aria_label} for the dynamically generated play button label for screen readers</td>
|
||||
<td>This is **required**. See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>debug</code></td>
|
||||
@ -154,7 +153,7 @@ You can pass the following settings:
|
||||
<td>Display debugging information on what Plyr is doing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seekInterval</code></td>
|
||||
<td><code>seekTime</code></td>
|
||||
<td>Number</td>
|
||||
<td><code>10</code></td>
|
||||
<td>The time, in seconds, to seek when a user hits fast forward or rewind.</td>
|
||||
@ -175,7 +174,7 @@ You can pass the following settings:
|
||||
<td><code>selectors</code></td>
|
||||
<td>Object</td>
|
||||
<td>—</td>
|
||||
<td>See `plyr.js` in `/assets` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
|
||||
<td>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`.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>classes</code></td>
|
||||
@ -193,7 +192,13 @@ You can pass the following settings:
|
||||
<td><code>fullscreen</code></td>
|
||||
<td>Object</td>
|
||||
<td>—</td>
|
||||
<td>This currently contains one property `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`.</td>
|
||||
<td>This currently contains two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a 'full window' view for older browsers. The default value is `true`.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>storage</code></td>
|
||||
<td>Object</td>
|
||||
<td>—</td>
|
||||
<td>This currently contains one property `enabled` which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -277,12 +282,34 @@ A complete list of events can be found here:
|
||||
## Fullscreen
|
||||
Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `player-fullscreen` class to your container.
|
||||
|
||||
## Support
|
||||
- Chrome: full support
|
||||
- Safari: full support
|
||||
- Firefox: full support
|
||||
- Internet Explorer 10, 11: full support
|
||||
- Internet Explorer 9: native player used (no support for `<progress>` or `<input type="range">`)
|
||||
## Browser support
|
||||
|
||||
<table width="100%" style="text-align: center;">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Safari</td>
|
||||
<td>Firefox</td>
|
||||
<td>Chrome</td>
|
||||
<td>Opera</td>
|
||||
<td>IE9</td>
|
||||
<td>IE10+</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>✔</td>
|
||||
<td>✔</td>
|
||||
<td>✔</td>
|
||||
<td>✔</td>
|
||||
<td>✖¹</td>
|
||||
<td>✔²</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
¹ Native player used (no support for `<progress>` or `<input type="range">`)
|
||||
|
||||
² IE10 has no native fullscreen support, fallback can be used (see options)
|
||||
|
||||
The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
|
||||
|
||||
@ -299,6 +326,16 @@ If you find anything weird with Plyr, please let us know using the Github issues
|
||||
## Author
|
||||
Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))
|
||||
|
||||
## Mentions
|
||||
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
||||
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
||||
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
|
||||
|
||||
## Used by
|
||||
- [Selz.com](https://selz.com)
|
||||
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
|
||||
## Useful links and credits
|
||||
Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
|
||||
- [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
|
||||
|
||||
@ -12,4 +12,15 @@ plyr.setup({
|
||||
captions: {
|
||||
defaultActive: true
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Google analytics
|
||||
// For demo site (http://plyr.io) only
|
||||
if(document.domain === "plyr.io") {
|
||||
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
||||
ga("create", "UA-40881672-11", "auto");
|
||||
ga("send", "pageview");
|
||||
}
|
||||
113
src/js/plyr.js
113
src/js/plyr.js
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.0.11
|
||||
// plyr.js v1.0.16
|
||||
// https://github.com/sampotts/plyr
|
||||
// ==========================================================================
|
||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
||||
@ -16,7 +16,7 @@
|
||||
var defaults = {
|
||||
enabled: true,
|
||||
debug: false,
|
||||
seekInterval: 10,
|
||||
seekTime: 10,
|
||||
volume: 5,
|
||||
click: true,
|
||||
selectors: {
|
||||
@ -66,15 +66,7 @@
|
||||
fallback: true
|
||||
},
|
||||
storage: {
|
||||
enabled: true,
|
||||
supported: function() {
|
||||
try {
|
||||
return "localStorage" in window && window.localStorage !== null;
|
||||
}
|
||||
catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
enabled: true
|
||||
}
|
||||
};
|
||||
|
||||
@ -342,6 +334,21 @@
|
||||
return fullscreen;
|
||||
}
|
||||
|
||||
// Local storage
|
||||
function _storage() {
|
||||
var storage = {
|
||||
supported: (function() {
|
||||
try {
|
||||
return "localStorage" in window && window.localStorage !== null;
|
||||
}
|
||||
catch(e) {
|
||||
return false;
|
||||
}
|
||||
})()
|
||||
}
|
||||
return storage;
|
||||
}
|
||||
|
||||
// Player instance
|
||||
function Plyr(container) {
|
||||
var player = this;
|
||||
@ -425,8 +432,8 @@
|
||||
// Need to do a default?
|
||||
var html = config.html;
|
||||
|
||||
// Replace aria label instances
|
||||
html = _replaceAll(html, "{aria-label}", config.playAriaLabel);
|
||||
// Replace seek time instances
|
||||
html = _replaceAll(html, "{seektime}", config.seekTime);
|
||||
|
||||
// Replace all id references
|
||||
html = _replaceAll(html, "{id}", player.random);
|
||||
@ -480,6 +487,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Setup aria attributes
|
||||
function _setupAria() {
|
||||
var label = player.buttons.play.innerText;
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (typeof(config.title) !== "undefined" && config.title.length) {
|
||||
label = player.buttons.play.innerText + ", " + config.title;
|
||||
}
|
||||
|
||||
player.buttons.play.setAttribute("aria-label", label);
|
||||
}
|
||||
|
||||
// Setup media
|
||||
function _setupMedia() {
|
||||
player.media = player.container.querySelectorAll("audio, video")[0];
|
||||
@ -681,8 +700,8 @@
|
||||
// Setup seeking
|
||||
function _setupSeeking() {
|
||||
// Update number of seconds in rewind and fast forward buttons
|
||||
player.seekTime[0].innerHTML = config.seekInterval;
|
||||
player.seekTime[1].innerHTML = config.seekInterval;
|
||||
player.seekTime[0].innerHTML = config.seekTime;
|
||||
player.seekTime[1].innerHTML = config.seekTime;
|
||||
}
|
||||
|
||||
// Setup fullscreen
|
||||
@ -706,21 +725,11 @@
|
||||
// Play media
|
||||
function _play() {
|
||||
player.media.play();
|
||||
|
||||
_checkPlaying();
|
||||
}
|
||||
|
||||
// Pause media
|
||||
function _pause() {
|
||||
player.media.pause();
|
||||
|
||||
_checkPlaying();
|
||||
}
|
||||
|
||||
// Check playing state
|
||||
function _checkPlaying() {
|
||||
_toggleClass(player.container, config.classes.playing, !player.media.paused);
|
||||
_toggleClass(player.container, config.classes.stopped, player.media.paused);
|
||||
player.media.pause();
|
||||
}
|
||||
|
||||
// Restart playback
|
||||
@ -738,13 +747,13 @@
|
||||
}
|
||||
|
||||
// Rewind
|
||||
function _rewind(seekInterval) {
|
||||
function _rewind(seekTime) {
|
||||
// Use default if needed
|
||||
if(typeof seekInterval === "undefined") {
|
||||
seekInterval = config.seekInterval;
|
||||
if(typeof seekTime !== "number") {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
|
||||
var targetTime = player.media.currentTime - seekInterval;
|
||||
var targetTime = player.media.currentTime - seekTime;
|
||||
|
||||
if (targetTime < 0) {
|
||||
player.media.currentTime = 0;
|
||||
@ -759,13 +768,13 @@
|
||||
}
|
||||
|
||||
// Fast forward
|
||||
function _forward(seekInterval) {
|
||||
function _forward(seekTime) {
|
||||
// Use default if needed
|
||||
if(typeof seekInterval === "undefined") {
|
||||
seekInterval = config.seekInterval;
|
||||
if(typeof seekTime !== "number") {
|
||||
seekTime = config.seekTime;
|
||||
}
|
||||
|
||||
var targetTime = player.media.currentTime + seekInterval;
|
||||
var targetTime = player.media.currentTime + seekTime;
|
||||
|
||||
if (targetTime > player.media.duration) {
|
||||
player.media.currentTime = player.media.duration;
|
||||
@ -779,6 +788,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Check playing state
|
||||
function _checkPlaying() {
|
||||
_toggleClass(player.container, config.classes.playing, !player.media.paused);
|
||||
_toggleClass(player.container, config.classes.stopped, player.media.paused);
|
||||
}
|
||||
|
||||
// Toggle fullscreen
|
||||
function _toggleFullscreen() {
|
||||
// Check for native support
|
||||
@ -833,7 +848,7 @@
|
||||
function _setVolume(volume) {
|
||||
// Use default if needed
|
||||
if(typeof volume === "undefined") {
|
||||
if(config.storage.enabled && config.storage.supported) {
|
||||
if(config.storage.enabled && _storage().supported) {
|
||||
volume = window.localStorage.plyr_volume || config.volume;
|
||||
}
|
||||
else {
|
||||
@ -850,7 +865,7 @@
|
||||
_checkMute();
|
||||
|
||||
// Store the volume in storage
|
||||
if(config.storage.enabled && config.storage.supported) {
|
||||
if(config.storage.enabled && _storage().supported) {
|
||||
window.localStorage.plyr_volume = volume;
|
||||
}
|
||||
}
|
||||
@ -941,27 +956,23 @@
|
||||
// Play
|
||||
_on(player.buttons.play, "click", function() {
|
||||
_play();
|
||||
player.buttons.pause.focus();
|
||||
setTimeout(function() { player.buttons.pause.focus(); }, 100);
|
||||
});
|
||||
|
||||
// Pause
|
||||
_on(player.buttons.pause, "click", function() {
|
||||
_pause();
|
||||
player.buttons.play.focus();
|
||||
setTimeout(function() { player.buttons.play.focus(); }, 100);
|
||||
});
|
||||
|
||||
// Restart
|
||||
_on(player.buttons.restart, "click", _restart);
|
||||
|
||||
// Rewind
|
||||
_on(player.buttons.rewind, "click", function() {
|
||||
_rewind(config.seekInterval);
|
||||
});
|
||||
_on(player.buttons.rewind, "click", _rewind);
|
||||
|
||||
// Fast forward
|
||||
_on(player.buttons.forward, "click", function() {
|
||||
_forward(config.seekInterval);
|
||||
});
|
||||
_on(player.buttons.forward, "click", _forward);
|
||||
|
||||
// Get the HTML5 range input element and append audio volume adjustment on change
|
||||
_on(player.volume, "change", function() {
|
||||
@ -1021,8 +1032,7 @@
|
||||
if(player.type === "video") {
|
||||
player.captionsContainer.innerHTML = "";
|
||||
}
|
||||
_toggleClass(player.container, config.classes.stopped, true);
|
||||
_toggleClass(player.container, config.classes.playing);
|
||||
_checkPlaying();
|
||||
});
|
||||
|
||||
// Check for buffer progress
|
||||
@ -1057,14 +1067,6 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set up aria-label for Play button with the title option
|
||||
if (typeof(config.title) === "undefined" || !config.title.length) {
|
||||
config.playAriaLabel = "Play";
|
||||
}
|
||||
else {
|
||||
config.playAriaLabel = "Play " + config.title;
|
||||
}
|
||||
|
||||
// Setup media
|
||||
_setupMedia();
|
||||
|
||||
@ -1079,6 +1081,9 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
// Set up aria-label for Play button with the title option
|
||||
_setupAria();
|
||||
|
||||
// Captions
|
||||
_setupCaptions();
|
||||
|
||||
|
||||
@ -306,7 +306,9 @@
|
||||
|
||||
// Volume control
|
||||
// <input[type='range']> element
|
||||
&-volume {
|
||||
// Specificty is for bootstrap compatibility
|
||||
&-volume[type=range] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
</button>
|
||||
<button type="button" data-player="rewind">
|
||||
<svg><use xlink:href="#icon-rewind"></use></svg>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">10</span> seconds</span>
|
||||
<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
</button>
|
||||
<button type="button" aria-label="{aria-label}" data-player="play">
|
||||
<button type="button" data-player="play">
|
||||
<svg><use xlink:href="#icon-play"></use></svg>
|
||||
<span class="sr-only">Play</span>
|
||||
</button>
|
||||
@ -26,7 +26,7 @@
|
||||
</button>
|
||||
<button type="button" data-player="fast-forward">
|
||||
<svg><use xlink:href="#icon-fast-forward"></use></svg>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">10</span> seconds</span>
|
||||
<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>
|
||||
</button>
|
||||
<span class="player-time">
|
||||
<span class="sr-only">Time</span>
|
||||
@ -41,7 +41,7 @@
|
||||
<span class="sr-only">Mute</span>
|
||||
</label>
|
||||
|
||||
<label for="volume{id}" class="sr-only">Volume:</label>
|
||||
<label for="volume{id}" class="sr-only">Volume</label>
|
||||
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">
|
||||
|
||||
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
|
||||
|
||||
Reference in New Issue
Block a user