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

Fixed bug with caption toggle, hide controls in fullscreen

Browse Source
This commit is contained in:
Sam Potts 2015-03-22 21:26:29 +11:00
parent c61db87fd6
commit 8b436276bf
10 changed files with 127 additions and 82 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.0.29
- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47)
- Fixed a bug with caption toggle in 1.0.28
## v1.0.28 ## v1.0.28
- Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod) - Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

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

2
package.json
View File

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

10
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.0.28/plyr.js` to `https://cdn.plyr.io/1.0.28/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.0.29/plyr.js` to `https://cdn.plyr.io/1.0.29/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.0.28/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.29/plyr.css">
<script src="//cdn.plyr.io/1.0.28/plyr.js"></script> <script src="//cdn.plyr.io/1.0.29/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.28/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.29/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.
@ -220,7 +220,7 @@ You can pass the following options to the setup method.
<td><code>fullscreen</code></td> <td><code>fullscreen</code></td>
<td>Object</td> <td>Object</td>
<td>&mdash;</td> <td>&mdash;</td>
<td>Two properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td> <td>Three properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. A <code>fallback</code> property which will enable a full window view for older browsers. The default value is <code>true</code>. A <code>hideControls</code> property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). The default value is <code>true</code>.</td>
</tr> </tr>
<tr> <tr>
<td><code>storage</code></td> <td><code>storage</code></td>

129
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.28 // plyr.js v1.0.29
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -55,13 +55,15 @@
loading: "loading", loading: "loading",
tooltip: "player-tooltip", tooltip: "player-tooltip",
hidden: "sr-only", hidden: "sr-only",
hover: "hover",
captions: { captions: {
enabled: "captions-enabled", enabled: "captions-enabled",
active: "captions-active" active: "captions-active"
}, },
fullscreen: { fullscreen: {
enabled: "fullscreen-enabled", enabled: "fullscreen-enabled",
active: "fullscreen-active" active: "fullscreen-active",
hideControls: "fullscreen-hide-controls"
} }
}, },
captions: { captions: {
@ -69,7 +71,8 @@
}, },
fullscreen: { fullscreen: {
enabled: true, enabled: true,
fallback: true fallback: true,
hideControls: true
}, },
storage: { storage: {
enabled: true, enabled: true,
@ -365,9 +368,6 @@
// Toggle the checkbox // Toggle the checkbox
event.target.checked = !event.target.checked; event.target.checked = !event.target.checked;
// Set the attribute for CSS hooks
event.target[event.target.checked ? "setAttribute" : "removeAttribute"]("checked", "");
// Trigger change event // Trigger change event
_triggerEvent(event.target, "change"); _triggerEvent(event.target, "change");
} }
@ -536,7 +536,7 @@
if (config.captions.defaultActive) { if (config.captions.defaultActive) {
_toggleClass(player.container, config.classes.captions.active, true); _toggleClass(player.container, config.classes.captions.active, true);
player.buttons.captions.setAttribute("checked", ""); player.buttons.captions.checked = true;
} }
} }
@ -687,33 +687,34 @@
return false; return false;
} }
// Remove native video controls
if(player.supported.full) { if(player.supported.full) {
// Remove native video controls
player.media.removeAttribute("controls"); player.media.removeAttribute("controls");
}
// Add type class // Add type class
_toggleClass(player.container, config.classes[player.type], true); _toggleClass(player.container, config.classes[player.type], true);
// If there's no autoplay attribute, assume the video is stopped and add state class // If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
// Add iOS class // Add iOS class
if(player.browser.ios) { if(player.browser.ios) {
_toggleClass(player.container, "ios", true); _toggleClass(player.container, "ios", true);
} }
// Inject the player wrapper // Inject the player wrapper
if(player.type === "video" && player.supported.full) { if(player.type === "video") {
// Create the wrapper div // Create the wrapper div
var wrapper = document.createElement("div"); var wrapper = document.createElement("div");
wrapper.setAttribute("class", config.classes.videoWrapper); wrapper.setAttribute("class", config.classes.videoWrapper);
// Wrap the video in a container // Wrap the video in a container
_wrap(player.media, wrapper); _wrap(player.media, wrapper);
// Cache the container // Cache the container
player.videoContainer = wrapper; player.videoContainer = wrapper;
}
} }
// Autoplay // Autoplay
@ -883,6 +884,11 @@
else { else {
_log("Fullscreen not supported and fallback disabled."); _log("Fullscreen not supported and fallback disabled.");
} }
// Set control hide class hook
if(config.fullscreen.hideControls) {
_toggleClass(player.container, config.classes.fullscreen.hideControls, true);
}
} }
} }
@ -1062,22 +1068,17 @@
// Toggle captions // Toggle captions
function _toggleCaptions(show) { function _toggleCaptions(show) {
if(!player.supported.plyr) { if(!player.supported.full) {
return; return;
} }
// If the method is called without parameter, toggle based on current value // If the method is called without parameter, toggle based on current value
if(typeof active === "undefined") { if(typeof show === "undefined") {
show = (player.container.className.indexOf(config.classes.captions.active) === -1); show = (player.container.className.indexOf(config.classes.captions.active) === -1);
player.buttons.captions.checked = show; player.buttons.captions.checked = show;
} }
if (show) { _toggleClass(player.container, config.classes.captions.active, show);
_toggleClass(player.container, config.classes.captions.active, true);
}
else {
_toggleClass(player.container, config.classes.captions.active);
}
} }
// Check mute state // Check mute state
@ -1207,9 +1208,6 @@
// Restart // Restart
_seek(); _seek();
// Update the UI
_checkPlaying();
// Remove current sources // Remove current sources
_removeSources(); _removeSources();
@ -1228,9 +1226,12 @@
} }
} }
// Reset time display
if(player.supported.full) { if(player.supported.full) {
// Reset time display
_timeUpdate(); _timeUpdate();
// Update the UI
_checkPlaying();
} }
// Re-load sources // Re-load sources
@ -1302,6 +1303,7 @@
// Captions // Captions
_on(player.buttons.captions, "change", function() { _on(player.buttons.captions, "change", function() {
console.log(this.checked);
_toggleCaptions(this.checked); _toggleCaptions(this.checked);
}); });
@ -1349,6 +1351,13 @@
} }
}); });
} }
// Bind to mouse hover
if(config.fullscreen.hideControls) {
_on(player.controls, "mouseenter mouseleave", function(event) {
_toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
})
}
} }
function _init() { function _init() {
@ -1358,23 +1367,18 @@
// Sniff out the browser // Sniff out the browser
player.browser = _browserSniff(); player.browser = _browserSniff();
// Check for full support
player.supported = api.supported();
// If no native support, bail
if(!player.supported.basic) {
return false;
}
// Get the media element // Get the media element
player.media = player.container.querySelectorAll("audio, video")[0]; player.media = player.container.querySelectorAll("audio, video")[0];
// Set media type // Set media type
player.type = player.media.tagName.toLowerCase(); player.type = player.media.tagName.toLowerCase();
// If iPhone/iPod and video, customisation support is limited // Check for full support
if(/iPhone|iPod/i.test(navigator.userAgent) && player.type === "video") { player.supported = api.supported(player.type);
player.supported.full = false;
// If no native support, bail
if(!player.supported.basic) {
return false;
} }
// Debug info // Debug info
@ -1438,13 +1442,34 @@
} }
// Check for support // Check for support
api.supported = function() { api.supported = function(type) {
var browser = _browserSniff(), var browser = _browserSniff(),
basic = (!!document.createElement("audio").canPlayType && !!document.createElement("video").canPlayType); oldIE = (browser.name === "IE" && browser.version <= 9),
iPhone = /iPhone|iPod/i.test(navigator.userAgent),
audio = !!document.createElement("audio").canPlayType,
video = !!document.createElement("video").canPlayType,
basic, full;
switch (type) {
case "video":
basic = video;
full = (basic && (!oldIE && !iPhone));
break;
case "audio":
basic = audio;
full = (basic && !oldIE);
break;
default:
basic = (audio && video);
full = (basic && !oldIE);
break;
}
return { return {
basic: basic, basic: basic,
full: basic && !(browser.name === "IE" && (browser.version <= 9)) full: full
}; };
} }

25
src/less/plyr.less
View File

@ -31,9 +31,9 @@
@tooltip-radius: 3px; @tooltip-radius: 3px;
// Progress // Progress
@progress-bg: lighten(@gray, 10%); @progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
@progress-playing-bg: @blue; @progress-playing-bg: @blue;
@progress-buffered-bg: @gray; @progress-buffered-bg: rgba(red(@gray), green(@gray), blue(@gray), .25);
@progress-loading-size: 40px; @progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15); @progress-loading-bg: rgba(0,0,0, .15);
@ -179,7 +179,7 @@
.clearfix(); .clearfix();
.font-smoothing(); .font-smoothing();
position: relative; position: relative;
padding: (@control-spacing * 2) @control-spacing @control-spacing; padding: @control-spacing;
background: @controls-bg; background: @controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -313,7 +313,7 @@
// <progress> element // <progress> element
&-progress { &-progress {
position: absolute; position: absolute;
top: 0; bottom: 100%;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
@ -549,6 +549,17 @@
left: 0; left: 0;
right: 0; right: 0;
} }
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s 1s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
} }
// Change icons on state change // Change icons on state change
@ -575,10 +586,4 @@
&.fullscreen-enabled [data-player='fullscreen'] + label { &.fullscreen-enabled [data-player='fullscreen'] + label {
display: inline-block; display: inline-block;
} }
// Full browser view hides toggle
&-fullscreen [data-player='fullscreen'],
&-fullscreen [data-player='fullscreen'] + label {
display: none !important;
}
} }

19
src/sass/plyr.scss
View File

@ -31,9 +31,9 @@ $tooltip-arrow-size: 5px;
$tooltip-radius: 3px; $tooltip-radius: 3px;
// Progress // Progress
$progress-bg: lighten($gray, 10%); $progress-bg: rgba(red($gray), green($gray), blue($gray), .2);
$progress-playing-bg: $blue; $progress-playing-bg: $blue;
$progress-buffered-bg: $gray; $progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25);
$progress-loading-size: 40px; $progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15); $progress-loading-bg: rgba(0,0,0, .15);
@ -187,7 +187,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
@include clearfix(); @include clearfix();
@include font-smoothing(); @include font-smoothing();
position: relative; position: relative;
padding: ($control-spacing * 2) $control-spacing $control-spacing; padding: $control-spacing;
background: $controls-bg; background: $controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -321,7 +321,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// <progress> element // <progress> element
&-progress { &-progress {
position: absolute; position: absolute;
top: 0; bottom: 100%;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
@ -557,6 +557,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
left: 0; left: 0;
right: 0; right: 0;
} }
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s 1s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
} }
// Change icons on state change // Change icons on state change