Compare commits

..

6 Commits

Author SHA1 Message Date
ecbda018c5 Merge branch 'master' of github.com:selz/plyr
# Conflicts:
#	src/js/plyr.js
2015-04-10 07:17:23 +10:00
5187311ff0 Bug fix for isFullscreen() in Mozilla (Fixes #38) 2015-04-10 07:16:53 +10:00
d9a94ac7b0 Version bump 2015-04-08 13:42:34 +10:00
3526e322ef Minor bug fixes 2015-04-06 19:42:26 +10:00
99cabd545d Fix for generated IDs for controls, UI tweak for audio 2015-04-06 13:25:36 +10:00
1f7f7b10de Docs tweak 2015-04-06 12:06:34 +10:00
10 changed files with 77 additions and 37 deletions

View File

@ -1,8 +1,18 @@
# Changelog # Changelog
## v1.1.5
- Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38)
## v1.1.4
- Minor bug fixes
## v1.1.3
- Fixes for random id used in controls with multiple instances and one call to setup
- Audio player UI improvements
## v1.1.2 ## v1.1.2
- Added an onSetup callback option - Added an onSetup callback option
- Added fullscreen API methods toggleFullscreen() (must be user iniated), and isFullscreen() - Added fullscreen API methods `toggleFullscreen()` (must be user iniated), and `isFullscreen()`
## v1.1.1 ## v1.1.1
- Fix for unsupported browser handling - Fix for unsupported browser handling
@ -12,7 +22,7 @@
- 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
## v1.0.31 ## v1.0.31
- Display duration on metadataloaded - Display duration on `metadataloaded`
## v1.0.30 ## v1.0.30
- Fixed bug with media longer than 60 minutes (Fixes #69) - Fixed bug with media longer than 60 minutes (Fixes #69)

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

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.2/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/docs.css">
</head> </head>
<body> <body>
<main> <main>

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.2/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.1.2/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/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.2/sprite.svg"); })(document, "https://cdn.plyr.io/1.1.5/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="//cdn.plyr.io/1.1.2/plyr.js"></script> <script src="//cdn.plyr.io/1.1.5/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="//cdn.plyr.io/1.1.2/docs.js"></script> <script src="//cdn.plyr.io/1.1.5/docs.js"></script>
</body> </body>
</html> </html>

View File

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

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.2/plyr.js` to `https://cdn.plyr.io/1.1.2/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.5/plyr.js` to `https://cdn.plyr.io/1.1.5/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -58,11 +58,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. 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.2/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/plyr.css">
<script src="//cdn.plyr.io/1.1.2/plyr.js"></script> <script src="//cdn.plyr.io/1.1.5/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.2/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.1.5/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.
@ -322,7 +322,7 @@ Here's a list of the methods supported:
</tr> </tr>
<tr> <tr>
<td><code>toggleFullscreen()</code></td> <td><code>toggleFullscreen()</code></td>
<td>&mdash;</td> <td>Event</td>
<td>Toggles fullscreen. This can only be initiated by a user gesture due to browser security, i.e. a user event such as click.</td> <td>Toggles fullscreen. This can only be initiated by a user gesture due to browser security, i.e. a user event such as click.</td>
</tr> </tr>
<tr> <tr>

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.1.2 // plyr.js v1.1.5
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -541,6 +541,8 @@
switch (this.prefix) { switch (this.prefix) {
case "": case "":
return document.fullscreenElement == element; return document.fullscreenElement == element;
case "moz":
return document.mozFullScreenElement == element;
default: default:
return document[this.prefix + "FullscreenElement"] == element; return document[this.prefix + "FullscreenElement"] == element;
} }
@ -680,22 +682,25 @@
// Insert controls // Insert controls
function _injectControls() { function _injectControls() {
// Make a copy of the html
var html = config.html;
// Insert custom video controls // Insert custom video controls
_log("Injecting custom controls."); _log("Injecting custom controls.");
// If no controls are specified, create default // If no controls are specified, create default
if(!config.html) { if(!html) {
config.html = _buildControls(); html = _buildControls();
} }
// Replace seek time instances // Replace seek time instances
config.html = _replaceAll(config.html, "{seektime}", config.seekTime); html = _replaceAll(html, "{seektime}", config.seekTime);
// Replace all id references // Replace all id references with random numbers
config.html = _replaceAll(config.html, "{id}", player.random); html = _replaceAll(html, "{id}", Math.floor(Math.random() * (10000)));
// Inject into the container // Inject into the container
player.container.insertAdjacentHTML("beforeend", config.html); player.container.insertAdjacentHTML("beforeend", html);
// Setup tooltips // Setup tooltips
if(config.tooltips) { if(config.tooltips) {
@ -1071,18 +1076,17 @@
// Toggle fullscreen // Toggle fullscreen
function _toggleFullscreen(event) { function _toggleFullscreen(event) {
// Check for native support // Check for native support
var nativeSupport = fullscreen.supportsFullScreen, var nativeSupport = fullscreen.supportsFullScreen;
container = player.container;
// If it's a fullscreen change event, it's probably a native close // If it's a fullscreen change event, it's probably a native close
if(event && event.type === fullscreen.fullScreenEventName) { if(event && event.type === fullscreen.fullScreenEventName) {
player.isFullscreen = fullscreen.isFullScreen(container); player.isFullscreen = fullscreen.isFullScreen(player.container);
} }
// If there's native support, use it // If there's native support, use it
else if(nativeSupport) { else if(nativeSupport) {
// Request fullscreen // Request fullscreen
if(!fullscreen.isFullScreen(container)) { if(!fullscreen.isFullScreen(player.container)) {
fullscreen.requestFullScreen(container); fullscreen.requestFullScreen(player.container);
} }
// Bail from fullscreen // Bail from fullscreen
else { else {
@ -1090,7 +1094,7 @@
} }
// Check if we're actually full screen (it could fail) // Check if we're actually full screen (it could fail)
player.isFullscreen = fullscreen.isFullScreen(container); player.isFullscreen = fullscreen.isFullScreen(player.container);
} }
else { else {
// Otherwise, it's a simple toggle // Otherwise, it's a simple toggle
@ -1108,7 +1112,12 @@
} }
// Set class hook // Set class hook
_toggleClass(container, config.classes.fullscreen.active, player.isFullscreen); _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
// Remove hover class because mouseleave doesn't occur
if (player.isFullscreen) {
_toggleClass(player.controls, config.classes.hover, false);
}
} }
// Bail from faux-fullscreen // Bail from faux-fullscreen
@ -1483,14 +1492,14 @@
if(player.type === "video" && config.click) { if(player.type === "video" && config.click) {
_on(player.videoContainer, "click", function() { _on(player.videoContainer, "click", function() {
if(player.media.paused) { if(player.media.paused) {
_play(); _triggerEvent(player.buttons.play, "click");
} }
else if(player.media.ended) { else if(player.media.ended) {
_seek(); _seek();
_play(); _triggerEvent(player.buttons.play, "click");
} }
else { else {
_pause(); _triggerEvent(player.buttons.pause, "click");
} }
}); });
} }
@ -1499,7 +1508,7 @@
if(config.fullscreen.hideControls) { if(config.fullscreen.hideControls) {
_on(player.controls, "mouseenter mouseleave", function(event) { _on(player.controls, "mouseenter mouseleave", function(event) {
_toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter")); _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
}) });
} }
} }
@ -1530,9 +1539,6 @@
// Setup media // Setup media
_setupMedia(); _setupMedia();
// Generate random number for id/for attribute values for controls
player.random = Math.floor(Math.random() * (10000));
// If there's full support // If there's full support
if(player.supported.full) { if(player.supported.full) {
// Inject custom controls // Inject custom controls

View File

@ -9,6 +9,7 @@
@gray-dark: #343f4a; @gray-dark: #343f4a;
@gray: #565d64; @gray: #565d64;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
@off-white: #d6dadd;
// Font sizes // Font sizes
@font-size-small: 14px; @font-size-small: 14px;
@ -527,6 +528,17 @@
float: none; float: none;
} }
// Audio specific styles
// Position the progress within the container
&-audio .player-controls {
padding-top: (@control-spacing * 2);
}
&-audio .player-progress {
bottom: auto;
top: 0;
background: @off-white;
}
// Full screen mode // Full screen mode
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {

View File

@ -9,6 +9,7 @@ $blue: #3498DB;
$gray-dark: #343f4a; $gray-dark: #343f4a;
$gray: #565d64; $gray: #565d64;
$gray-light: #cbd0d3; $gray-light: #cbd0d3;
$off-white: #d6dadd;
// Font sizes // Font sizes
$font-size-small: 14px; $font-size-small: 14px;
@ -535,6 +536,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
float: none; float: none;
} }
// Audio specific styles
// Position the progress within the container
&-audio .player-controls {
padding-top: ($control-spacing * 2);
}
&-audio .player-progress {
bottom: auto;
top: 0;
background: $off-white;
}
// Full screen mode // Full screen mode
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {