ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug fixes and improvements

Browse Source
This commit is contained in:
Sam Potts 2015-03-04 08:08:38 +11:00
parent 9e65b67bc1
commit 4d483bf66c
10 changed files with 167 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -29,5 +29,5 @@
"type": "git", "type": "git",
"url": "git://github.com/selz/plyr.git" "url": "git://github.com/selz/plyr.git"
}, },
"license": "BSD" "license": "MIT"
} }

6
changelog.md
View File

@ -1,5 +1,11 @@
# Changelog # Changelog
## v1.0.20
- Default controls included (Fixes #45)
- Volume changes on `input` as well as `change` (Fixes #43)
- Fix for undefined Play text
- License changed to MIT
## v1.0.19 ## v1.0.19
- Fixed firefox fullscreen issue (#38) - Fixed firefox fullscreen issue (#38)

124
controls.md
View File

@ -1,8 +1,8 @@
# Controls HTML # Controls HTML
This is the markup that is rendered for the Plyr controls. The reason it's a separate 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! This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs.
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. The demo Plyr setup uses a Hogan template. This purely 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 check out the `plyr.js` source.
## Requirements ## Requirements
@ -15,67 +15,65 @@ You need to add several placeholders to your html template that are replaced whe
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. 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 ## Default
You can of course, just specify vanilla HTML. Here's an example snippet: This is the default `html` option from `plyr.js`.
```html ```javascript
var controls = [ ["<div class='player-controls'>",
'<div class="player-controls">', "<div class='player-progress'>",
'<div class="player-progress">', "<progress class='player-progress-played' max='100' value='0'>",
'<progress class="player-progress-played" max="100" value="0">', "<span>0</span>% played",
'<span>0</span>% played', "</progress>",
'</progress>', "<progress class='player-progress-buffer' max='100' value='0'>",
'<progress class="player-progress-buffer" max="100" value="0">', "<span>0</span>% buffered",
'<span>0</span>% buffered', "</progress>",
'</progress>', "</div>",
'</div>', "<span class='player-controls-playback'>",
'<span class="player-controls-playback">', "<button type='button' data-player='restart'>",
'<button type="button" data-player="restart">', "<svg><use xlink:href='#icon-refresh'></use></svg>",
'<svg><use xlink:href="#icon-refresh"></use></svg>', "<span class='sr-only'>Restart</span>",
'<span class="sr-only">Restart</span>', "</button>",
'</button>', "<button type='button' data-player='rewind'>",
'<button type="button" data-player="rewind">', "<svg><use xlink:href='#icon-rewind'></use></svg>",
'<svg><use xlink:href="#icon-rewind"></use></svg>', "<span class='sr-only'>Rewind <span class='player-seek-time'>{seektime}</span> seconds</span>",
'<span class="sr-only">Rewind <span class="player-seek-time">{seektime}</span> seconds</span>', "</button>",
'</button>', "<button type='button' data-player='play'>",
'<button type="button" data-player="play">', "<svg><use xlink:href='#icon-play'></use></svg>",
'<svg><use xlink:href="#icon-play"></use></svg>', "<span class='sr-only'>Play</span>",
'<span class="sr-only">Play</span>', "</button>",
'</button>', "<button type='button' data-player='pause'>",
'<button type="button" data-player="pause">', "<svg><use xlink:href='#icon-pause'></use></svg>",
'<svg><use xlink:href="#icon-pause"></use></svg>', "<span class='sr-only'>Pause</span>",
'<span class="sr-only">Pause</span>', "</button>",
'</button>', "<button type='button' data-player='fast-forward'>",
'<button type="button" data-player="fast-forward">', "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
'<svg><use xlink:href="#icon-fast-forward"></use></svg>', "<span class='sr-only'>Fast forward <span class='player-seek-time'>{seektime}</span> seconds</span>",
'<span class="sr-only">Fast forward <span class="player-seek-time">{seektime}</span> seconds</span>', "</button>",
'</button>', "<span class='player-time'>",
'<span class="player-time">', "<span class='sr-only'>Time</span>",
'<span class="sr-only">Time</span>', "<span class='player-duration'>00:00</span>",
'<span class="player-duration">00:00</span>', "</span>",
'</span>', "</span>",
'</span>', "<span class='player-controls-sound'>",
'<span class="player-controls-sound">', "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
'<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">', "<label id='mute{id}' for='mute{id}'>",
'<label id="mute{id}" for="mute{id}">', "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
'<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>', "<svg><use xlink:href='#icon-sound'></use></svg>",
'<svg><use xlink:href="#icon-sound"></use></svg>', "<span class='sr-only'>Mute</span>",
'<span class="sr-only">Mute</span>', "</label>",
'</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 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'>",
'<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">', "<label for='captions{id}'>",
'<label for="captions{id}">', "<svg><use xlink:href='#icon-bubble'></use></svg>",
'<svg><use xlink:href="#icon-bubble"></use></svg>', "<span class='sr-only'>Captions</span>",
'<span class="sr-only">Captions</span>', "</label>",
'</label>', "<button type='button' data-player='fullscreen'>",
'<button type="button" data-player="fullscreen">', "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-collapse'></use></svg>",
'<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>', "<svg><use xlink:href='#icon-expand'></use></svg>",
'<svg><use xlink:href="#icon-expand"></use></svg>', "<span class='sr-only'>Toggle fullscreen</span>",
'<span class="sr-only">Toggle fullscreen</span>', "</button>",
'</button>', "</span>",
'</span>', "</div>"].join("\n");
'</div>'
].join("\n");
``` ```

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
</head> </head>
<body> <body>
<main> <main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.19/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.20/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -67,13 +67,13 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.19/sprite.svg"); (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.20/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.19/plyr.js"></script> <script src="//cdn.plyr.io/1.0.20/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="//cdn.plyr.io/1.0.19/docs.js"></script> <script src="//cdn.plyr.io/1.0.20/docs.js"></script>
</body> </body>
</html> </html>

25
license.md
View File

@ -1,12 +1,21 @@
Copyright (c) 2015, Selz.com The MIT License (MIT)
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Copyright (c) 2015 Selz.com
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.19", "version": "1.0.20",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",
@ -39,5 +39,5 @@
"authors": [ "authors": [
"Sam Potts <me@sampotts.me>" "Sam Potts <me@sampotts.me>"
], ],
"license": "BSD" "license": "MIT"
} }

12
readme.md
View File

@ -10,7 +10,7 @@ We wanted a lightweight, accessible and customisable media player that just supp
## Features ## Features
- **Accessible** - full support for captions and screen readers. - **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 4.8KB minified and gzipped. - **Lightweight** - just 5.3KB minified and gzipped.
- **Customisable** - make the player look how you want with the markup you want. - **Customisable** - 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. - **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. - **Responsive** - as you'd expect these days.
@ -131,13 +131,15 @@ Much of the behaviour of the player is configurable when initialising the librar
<script src="dist/plyr.js"></script> <script src="dist/plyr.js"></script>
<script> <script>
plyr.setup({ plyr.setup({
html: **your controls html** *options*
}); });
</script> </script>
``` ```
#### Options #### Options
You can pass the following options to the setup method.
<table class="table" width="100%"> <table class="table" width="100%">
<thead> <thead>
<tr> <tr>
@ -157,8 +159,8 @@ plyr.setup({
<tr> <tr>
<td><code>html</code></td> <td><code>html</code></td>
<td>String</td> <td>String</td>
<td><code>&mdash;</code></td> <td><code><a href="controls.md">See controls.md</a></code></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> <td>See <a href="controls.md">controls.md</a> for more info on how the html needs to be structured.</td>
</tr> </tr>
<tr> <tr>
<td><code>debug</code></td> <td><code>debug</code></td>
@ -360,4 +362,4 @@ Also these links helped created Plyr:
- [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/) - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)
## Copyright and License ## Copyright and License
Copyright 2014, Selz.com under [the BSD license](license.md). [The MIT license](license.md).

72
src/js/plyr.js
View File

@ -1,7 +1,8 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.19 // plyr.js v1.0.20
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/
// ========================================================================== // ==========================================================================
@ -67,7 +68,65 @@
}, },
storage: { storage: {
enabled: true enabled: true
} },
html: (function() {
return ["<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");
})()
}; };
// Debugging // Debugging
@ -489,11 +548,11 @@
// Setup aria attributes // Setup aria attributes
function _setupAria() { function _setupAria() {
var label = player.buttons.play.innerText; var label = player.buttons.play.innerText || "Play";
// If there's a media title set, use that for the label // If there's a media title set, use that for the label
if (typeof(config.title) !== "undefined" && config.title.length) { if (typeof(config.title) !== "undefined" && config.title.length) {
label = player.buttons.play.innerText + ", " + config.title; label += ", " + config.title;
} }
player.buttons.play.setAttribute("aria-label", label); player.buttons.play.setAttribute("aria-label", label);
@ -974,8 +1033,9 @@
// Fast forward // Fast forward
_on(player.buttons.forward, "click", _forward); _on(player.buttons.forward, "click", _forward);
// Get the HTML5 range input element and append audio volume adjustment on change // Get the HTML5 range input element and append audio volume adjustment on change/input
_on(player.volume, "change", function() { // IE10 doesn't support the "input" event so they have to wait for change
_on(player.volume, "change input", function() {
_setVolume(this.value); _setVolume(this.value);
}); });