diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 133 | ||||
| -rw-r--r-- | src/less/plyr.less | 25 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 19 |
3 files changed, 109 insertions, 68 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 6ef6cb75..4665a2a1 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -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,33 +687,34 @@ 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); - - // 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)); + + // Add type class + _toggleClass(player.container, config.classes[player.type], true); - // Add iOS class - if(player.browser.ios) { - _toggleClass(player.container, "ios", true); - } + // 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)); + + // Add iOS class + if(player.browser.ios) { + _toggleClass(player.container, "ios", true); + } - // Inject the player wrapper - if(player.type === "video" && player.supported.full) { - // Create the wrapper div - var wrapper = document.createElement("div"); - wrapper.setAttribute("class", config.classes.videoWrapper); + // Inject the player wrapper + if(player.type === "video") { + // Create the wrapper div + var wrapper = document.createElement("div"); + wrapper.setAttribute("class", config.classes.videoWrapper); - // Wrap the video in a container - _wrap(player.media, wrapper); + // Wrap the video in a container + _wrap(player.media, wrapper); - // Cache the container - player.videoContainer = wrapper; + // Cache the container + player.videoContainer = wrapper; + } } // Autoplay @@ -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 }; } diff --git a/src/less/plyr.less b/src/less/plyr.less index 349f945e..dd7d9c7b 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -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; - } }
\ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 748ab2a8..76b187f7 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -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 |