diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 28 | ||||
| -rw-r--r-- | src/less/plyr.less | 29 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 30 |
3 files changed, 80 insertions, 7 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index f8222173..aae7adfd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.22 +// plyr.js v1.0.23 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== @@ -50,6 +50,7 @@ stopped: "stopped", playing: "playing", muted: "muted", + loading: "loading", captions: { enabled: "captions-enabled", active: "captions-active" @@ -626,7 +627,7 @@ player.media.removeAttribute("controls"); // Set media type - player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); + player.type = (player.media.tagName == "VIDEO" ? "video" : "audio"); // Add type class _toggleClass(player.container, config.classes[player.type], true); @@ -994,6 +995,19 @@ _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted)); } + // Check if media is loading + function _checkLoading(event) { + var loading = (event.type === "waiting"); + + // Clear timer + clearTimeout(player.loadingTimer); + + // Timer to prevent flicker when seeking + player.loadingTimer = setTimeout(function() { + _toggleClass(player.container, config.classes.loading, loading); + }, (loading ? 250 : 0)); + } + // Update <progress> elements function _updateProgress(event) { var progress = player.progress.played.bar, @@ -1232,6 +1246,9 @@ // Handle native play/pause _on(player.media, "play pause", _checkPlaying); + + // Loading + _on(player.media, "waiting canplay seeked", _checkLoading); } function _init() { @@ -1321,6 +1338,13 @@ // Get the current element var element = elements[i]; + // Disabled for <video> for iPhone + // Since it doesn't allow customisation + if (element.querySelectorAll("audio, video")[0].tagName === "VIDEO" + && /iPhone/i.test(navigator.userAgent)) { + continue; + } + // Setup a player instance and add to the element if(typeof element.plyr === "undefined") { element.plyr = new Plyr(element); diff --git a/src/less/plyr.less b/src/less/plyr.less index 410404be..3f9b7d2d 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -27,6 +27,8 @@ @progress-bg: lighten(@gray, 10%); @progress-playing-bg: @blue; @progress-buffered-bg: @gray; +@progress-loading-size: 40px; +@progress-loading-bg: rgba(0,0,0, .15); // Volume @volume-track-height: 6px; @@ -59,13 +61,18 @@ &:after { content: ""; display: table; } &:after { clear: both; } } - // Tab focus styles .tab-focus() { outline: thin dotted #000; outline-offset: 0; } +// Animation +// --------------------------------------- +@keyframes progress { + to { background-position: @progress-loading-size 0; } +} + // <input type="range"> styling // --------------------------------------- .volume-thumb() { @@ -86,7 +93,7 @@ .seek-thumb() { background: transparent; border: 0; - width: 2px; + width: (@control-spacing * 2); height: @control-spacing; } .seek-track() { @@ -345,6 +352,24 @@ } } + // Loading state + &.loading .player-progress-buffer { + animation: progress 1s linear infinite; + background-size: @progress-loading-size @progress-loading-size; + background-repeat: repeat-x; + background-color: @progress-buffered-bg; + background-image: linear-gradient( + -45deg, + @progress-loading-bg 25%, + transparent 25%, + transparent 50%, + @progress-loading-bg 50%, + @progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; + } + // States &-controls [data-player='pause'], &.playing .player-controls [data-player='play'] { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index d7045b41..0940b378 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -21,13 +21,14 @@ $controls-bg: $gray-dark; $control-bg-hover: $blue; $control-color: $gray-light; $control-color-inactive: $gray; -$control-color-focus: #fff; $control-color-hover: #fff; // Progress $progress-bg: lighten($gray, 10%); $progress-playing-bg: $blue; $progress-buffered-bg: $gray; +$progress-loading-size: 40px; +$progress-loading-bg: rgba(0,0,0, .15); // Range $volume-track-height: 6px; @@ -61,7 +62,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size &:after { content: ""; display: table; } &:after { clear: both; } } - // Tab focus styles @mixin tab-focus() { @@ -69,6 +69,12 @@ $bp-captions-large: 768px; // When captions jump to the larger font size outline-offset: 0; } +// Animation +// --------------------------------------- +@keyframes progress { + to { background-position: @progress-loading-size 0; } +} + // <input type="range"> styling // --------------------------------------- @mixin volume-thumb() @@ -91,7 +97,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size @mixin seek-thumb() { background: transparent; border: 0; - width: 2px; + width: ($control-spacing * 2); height: $control-spacing; } @mixin seek-track() { @@ -350,6 +356,24 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } } + // Loading state + &.loading .player-progress-buffer { + animation: progress 1s linear infinite; + background-size: $progress-loading-size $progress-loading-size; + background-repeat: repeat-x; + background-color: $progress-buffered-bg; + background-image: linear-gradient( + -45deg, + $progress-loading-bg 25%, + transparent 25%, + transparent 50%, + $progress-loading-bg 50%, + $progress-loading-bg 75%, + transparent 75%, + transparent); + color: transparent; + } + // States &-controls [data-player='pause'], &.playing .player-controls [data-player='play'] { |