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

Bug fixes for controls changes

Browse Source
This commit is contained in:
Sam Potts 2015-04-04 12:51:24 +11:00
parent e568bc9c8d
commit 7c5f38311b
7 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## v1.1.1
- Fix for unsupported browser handling
- Fix for config.controls having no effect
## v1.1.0 ## v1.1.0
- Added config option to set which controls are shown (if using the default controls html) and better handling of missing controls - Added config option to set which controls are shown (if using the default controls html) and better handling of missing controls

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

2
package.json
View File

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

8
readme.md
View File

@ -38,7 +38,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.0/plyr.js` to `https://cdn.plyr.io/1.1.0/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.1/plyr.js` to `https://cdn.plyr.io/1.1.1/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.1.0/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.1/plyr.css">
<script src="//cdn.plyr.io/1.1.0/plyr.js"></script> <script src="//cdn.plyr.io/1.1.1/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.0/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.1/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.

34
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.1.0 // plyr.js v1.1.1
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -84,7 +84,7 @@
}; };
// Build the default HTML // Build the default HTML
defaults.html = (function() { function _buildControls() {
// Open and add the progress and seek elements // Open and add the progress and seek elements
var html = [ var html = [
"<div class='player-controls'>", "<div class='player-controls'>",
@ -101,7 +101,7 @@
"<span class='player-controls-left'>"]; "<span class='player-controls-left'>"];
// Restart button // Restart button
if(_inArray(defaults.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='#icon-restart'></use></svg>",
@ -111,7 +111,7 @@
} }
// Rewind button // Rewind button
if(_inArray(defaults.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='#icon-rewind'></use></svg>",
@ -121,7 +121,7 @@
} }
// Play/pause button // Play/pause button
if(_inArray(defaults.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='#icon-play'></use></svg>",
@ -135,7 +135,7 @@
} }
// Fast forward button // Fast forward button
if(_inArray(defaults.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='#icon-fast-forward'></use></svg>",
@ -145,7 +145,7 @@
} }
// Media current time display // Media current time display
if(_inArray(defaults.controls, "current-time")) { if(_inArray(config.controls, "current-time")) {
html.push( html.push(
"<span class='player-time'>", "<span class='player-time'>",
"<span class='sr-only'>Current time</span>", "<span class='sr-only'>Current time</span>",
@ -155,7 +155,7 @@
} }
// Media duration display // Media duration display
if(_inArray(defaults.controls, "duration")) { if(_inArray(config.controls, "duration")) {
html.push( html.push(
"<span class='player-time'>", "<span class='player-time'>",
"<span class='sr-only'>Duration</span>", "<span class='sr-only'>Duration</span>",
@ -171,7 +171,7 @@
); );
// Toggle mute button // Toggle mute button
if(_inArray(defaults.controls, "mute")) { if(_inArray(config.controls, "mute")) {
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}'>",
@ -183,7 +183,7 @@
} }
// Volume range control // Volume range control
if(_inArray(defaults.controls, "volume")) { if(_inArray(config.controls, "volume")) {
html.push( html.push(
"<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'>"
@ -191,7 +191,7 @@
} }
// Toggle captions button // Toggle captions button
if(_inArray(defaults.controls, "captions")) { if(_inArray(config.controls, "captions")) {
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}'>",
@ -203,7 +203,7 @@
} }
// Toggle fullscreen button // Toggle fullscreen button
if(_inArray(defaults.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='#icon-exit-fullscreen'></use></svg>",
@ -220,7 +220,7 @@
); );
return html.join(""); return html.join("");
})(); }
// Debugging // Debugging
function _log(text, error) { function _log(text, error) {
@ -330,7 +330,7 @@
// Element exists in an array // Element exists in an array
function _inArray(haystack, needle) { function _inArray(haystack, needle) {
return (haystack.indexOf(needle) != -1); return Array.prototype.indexOf && (haystack.indexOf(needle) != -1);
} }
// Replace all // Replace all
@ -684,9 +684,9 @@
// Insert custom video controls // Insert custom video controls
_log("Injecting custom controls."); _log("Injecting custom controls.");
// If no controls are specified, bail // If no controls are specified, create default
if(!config.html) { if(!config.html) {
return; config.html = _buildControls();
} }
// Replace seek time instances // Replace seek time instances
@ -1624,7 +1624,7 @@
// Extend the default options with user specified // Extend the default options with user specified
config = _extend(defaults, options); config = _extend(defaults, options);
// If enabled carry on // Bail if disabled or no basic support
// You may want to disable certain UAs etc // You may want to disable certain UAs etc
if(!config.enabled || !api.supported().basic) { if(!config.enabled || !api.supported().basic) {
return false; return false;