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

Merge branch 'master' into develop

Browse Source 
# Conflicts:
#	changelog.md
#	dist/plyr.js
This commit is contained in:
Sam Potts 2015-07-20 22:25:31 +10:00
commit 8894b4c7b9
7 changed files with 59 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
changelog.md
View File

@ -3,6 +3,33 @@
## v1.2.0 ## v1.2.0
- Added YouTube support. - Added YouTube support.
## v1.1.13
- Added icon prefix option for when using default controls
## v1.1.13
- Logic tweaks for hiding controls in fullscreen
## v1.1.12
- Bug fix for Chrome Canary
## v1.1.11
- Bug fix
## v1.1.10
- Bug fix
## v1.1.9
- Bug fix for 1.1.8
## v1.1.8
- setVolume API method improvements (Fixes #83)
## v1.1.7
- Restore classname on destroy()
## v1.1.6
- New API methods (fixes #77), Fix for non strict mode (fixes #78)
## v1.1.5 ## v1.1.5
- Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38) - Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38)

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.1.13/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.14/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="https://cdn.plyr.io/1.1.13/plyr.css?1"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/plyr.css?1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.13/docs.css?2"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/docs.css?2">
</head> </head>
<body> <body>
<header> <header>
@ -95,13 +95,13 @@
b.insertBefore(c, b.childNodes[0]); b.insertBefore(c, b.childNodes[0]);
} }
} }
})(document, "https://cdn.plyr.io/1.1.13/sprite.svg"); })(document, "https://cdn.plyr.io/1.1.14/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="https://cdn.plyr.io/1.1.13/plyr.js?1"></script> <script src="https://cdn.plyr.io/1.1.14/plyr.js?1"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="https://cdn.plyr.io/1.1.13/docs.js?1"></script> <script src="https://cdn.plyr.io/1.1.14/docs.js?1"></script>
</body> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.1.13", "version": "1.1.14",
"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",

14
readme.md
View File

@ -39,7 +39,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. 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.1.13/plyr.js` to `https://cdn.plyr.io/1.1.13/plyr.js` **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.1.14/plyr.js` to `https://cdn.plyr.io/1.1.14/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.1.13/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.1.14/plyr.css">
<script src="https://cdn.plyr.io/1.1.13/plyr.js"></script> <script src="https://cdn.plyr.io/1.1.14/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.13/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.14/sprite.svg`.
### CSS ### CSS
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. 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.
@ -182,6 +182,12 @@ You can pass the following options to the setup method using `plyr.setup({...})`
<td><code>["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"]</code></td> <td><code>["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"]</code></td>
<td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td> <td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td>
</tr> </tr>
<tr>
<td><code>iconPrefix</code></td>
<td>String</td>
<td><code>icon</code></td>
<td>Specify the id prefix for the icons used in the default controls (e.g. "icon-play" would be "icon"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.</td>
</tr>
<tr> <tr>
<td><code>debug</code></td> <td><code>debug</code></td>
<td>Boolean</td> <td>Boolean</td>

25
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.1.13 // plyr.js v1.1.14
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -23,6 +23,7 @@
click: true, click: true,
tooltips: false, tooltips: false,
displayDuration: true, displayDuration: true,
iconPrefix: "icon",
selectors: { selectors: {
container: ".player", container: ".player",
controls: ".player-controls", controls: ".player-controls",
@ -106,7 +107,7 @@
if(_inArray(config.controls, "restart")) { if(_inArray(config.controls, "restart")) {
html.push( html.push(
"<button type='button' data-player='restart'>", "<button type='button' data-player='restart'>",
"<svg><use xlink:href='#icon-restart'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>",
"<span class='sr-only'>Restart</span>", "<span class='sr-only'>Restart</span>",
"</button>" "</button>"
); );
@ -116,7 +117,7 @@
if(_inArray(config.controls, "rewind")) { if(_inArray(config.controls, "rewind")) {
html.push( html.push(
"<button type='button' data-player='rewind'>", "<button type='button' data-player='rewind'>",
"<svg><use xlink:href='#icon-rewind'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>",
"<span class='sr-only'>Rewind {seektime} secs</span>", "<span class='sr-only'>Rewind {seektime} secs</span>",
"</button>" "</button>"
); );
@ -126,11 +127,11 @@
if(_inArray(config.controls, "play")) { if(_inArray(config.controls, "play")) {
html.push( html.push(
"<button type='button' data-player='play'>", "<button type='button' data-player='play'>",
"<svg><use xlink:href='#icon-play'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-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='#" + config.iconPrefix + "-pause'></use></svg>",
"<span class='sr-only'>Pause</span>", "<span class='sr-only'>Pause</span>",
"</button>" "</button>"
); );
@ -140,7 +141,7 @@
if(_inArray(config.controls, "fast-forward")) { if(_inArray(config.controls, "fast-forward")) {
html.push( html.push(
"<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='#" + config.iconPrefix + "-fast-forward'></use></svg>",
"<span class='sr-only'>Forward {seektime} secs</span>", "<span class='sr-only'>Forward {seektime} secs</span>",
"</button>" "</button>"
); );
@ -177,8 +178,8 @@
html.push( html.push(
"<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='#" + config.iconPrefix + "-muted'></use></svg>",
"<svg><use xlink:href='#icon-volume'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>",
"<span class='sr-only'>Toggle Mute</span>", "<span class='sr-only'>Toggle Mute</span>",
"</label>" "</label>"
); );
@ -197,8 +198,8 @@
html.push( html.push(
"<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 class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>", "<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
"<svg><use xlink:href='#icon-captions-off'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>",
"<span class='sr-only'>Toggle Captions</span>", "<span class='sr-only'>Toggle Captions</span>",
"</label>" "</label>"
); );
@ -208,8 +209,8 @@
if(_inArray(config.controls, "fullscreen")) { if(_inArray(config.controls, "fullscreen")) {
html.push( html.push(
"<button type='button' data-player='fullscreen'>", "<button type='button' data-player='fullscreen'>",
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>", "<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>",
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>",
"<span class='sr-only'>Toggle Fullscreen</span>", "<span class='sr-only'>Toggle Fullscreen</span>",
"</button>" "</button>"
); );