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
## 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
- 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">
<!-- 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>
<body>
<main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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 -->
<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>
<body>
<header>
@ -83,13 +83,13 @@
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>
<!-- 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 -->
<script src="//cdn.plyr.io/1.0.28/docs.js"></script>
<script src="//cdn.plyr.io/1.0.29/docs.js"></script>
</body>
</html>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.0.28",
"version": "1.0.29",
"description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io",
"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.
**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
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.
```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.28/plyr.css">
<script src="//cdn.plyr.io/1.0.28/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.29/plyr.css">
<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
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>Object</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>
<td><code>storage</code></td>

97
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.28
// plyr.js v1.0.29
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -55,13 +55,15 @@
loading: "loading",
tooltip: "player-tooltip",
hidden: "sr-only",
hover: "hover",
captions: {
enabled: "captions-enabled",
active: "captions-active"
},
fullscreen: {
enabled: "fullscreen-enabled",
active: "fullscreen-active"
active: "fullscreen-active",
hideControls: "fullscreen-hide-controls"
}
},
captions: {
@ -69,7 +71,8 @@
},
fullscreen: {
enabled: true,
fallback: true
fallback: true,
hideControls: true
},
storage: {
enabled: true,
@ -365,9 +368,6 @@
// Toggle the checkbox
event.target.checked = !event.target.checked;
// Set the attribute for CSS hooks
event.target[event.target.checked ? "setAttribute" : "removeAttribute"]("checked", "");
// Trigger change event
_triggerEvent(event.target, "change");
}
@ -536,7 +536,7 @@
if (config.captions.defaultActive) {
_toggleClass(player.container, config.classes.captions.active, true);
player.buttons.captions.setAttribute("checked", "");
player.buttons.captions.checked = true;
}
}
@ -687,10 +687,10 @@
return false;
}
// Remove native video controls
if(player.supported.full) {
// Remove native video controls
player.media.removeAttribute("controls");
}
// Add type class
_toggleClass(player.container, config.classes[player.type], true);
@ -704,7 +704,7 @@
}
// Inject the player wrapper
if(player.type === "video" && player.supported.full) {
if(player.type === "video") {
// Create the wrapper div
var wrapper = document.createElement("div");
wrapper.setAttribute("class", config.classes.videoWrapper);
@ -715,6 +715,7 @@
// Cache the container
player.videoContainer = wrapper;
}
}
// Autoplay
if(player.media.getAttribute("autoplay") !== null) {
@ -883,6 +884,11 @@
else {
_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
function _toggleCaptions(show) {
if(!player.supported.plyr) {
if(!player.supported.full) {
return;
}
// 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);
player.buttons.captions.checked = show;
}
if (show) {
_toggleClass(player.container, config.classes.captions.active, true);
}
else {
_toggleClass(player.container, config.classes.captions.active);
}
_toggleClass(player.container, config.classes.captions.active, show);
}
// Check mute state
@ -1207,9 +1208,6 @@
// Restart
_seek();
// Update the UI
_checkPlaying();
// Remove current sources
_removeSources();
@ -1228,9 +1226,12 @@
}
}
// Reset time display
if(player.supported.full) {
// Reset time display
_timeUpdate();
// Update the UI
_checkPlaying();
}
// Re-load sources
@ -1302,6 +1303,7 @@
// Captions
_on(player.buttons.captions, "change", function() {
console.log(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() {
@ -1358,23 +1367,18 @@
// Sniff out the browser
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
player.media = player.container.querySelectorAll("audio, video")[0];
// Set media type
player.type = player.media.tagName.toLowerCase();
// If iPhone/iPod and video, customisation support is limited
if(/iPhone|iPod/i.test(navigator.userAgent) && player.type === "video") {
player.supported.full = false;
// Check for full support
player.supported = api.supported(player.type);
// If no native support, bail
if(!player.supported.basic) {
return false;
}
// Debug info
@ -1438,13 +1442,34 @@
}
// Check for support
api.supported = function() {
api.supported = function(type) {
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 {
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;
// Progress
@progress-bg: lighten(@gray, 10%);
@progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
@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-bg: rgba(0,0,0, .15);
@ -179,7 +179,7 @@
.clearfix();
.font-smoothing();
position: relative;
padding: (@control-spacing * 2) @control-spacing @control-spacing;
padding: @control-spacing;
background: @controls-bg;
line-height: 1;
text-align: center;
@ -313,7 +313,7 @@
// <progress> element
&-progress {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
width: 100%;
@ -549,6 +549,17 @@
left: 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
@ -575,10 +586,4 @@
&.fullscreen-enabled [data-player='fullscreen'] + label {
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;
// Progress
$progress-bg: lighten($gray, 10%);
$progress-bg: rgba(red($gray), green($gray), blue($gray), .2);
$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-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 font-smoothing();
position: relative;
padding: ($control-spacing * 2) $control-spacing $control-spacing;
padding: $control-spacing;
background: $controls-bg;
line-height: 1;
text-align: center;
@ -321,7 +321,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// <progress> element
&-progress {
position: absolute;
top: 0;
bottom: 100%;
left: 0;
right: 0;
width: 100%;
@ -557,6 +557,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
left: 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