diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 115 | ||||
| -rw-r--r-- | src/less/plyr.less | 6 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 6 |
3 files changed, 95 insertions, 32 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index 3d856364..fd408709 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.25 +// plyr.js v1.0.27 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -317,6 +317,17 @@ function _toggleHandler(element, events, callback, toggle) { events = events.split(" "); + // If a nodelist is passed, call itself on each node + if(element instanceof NodeList) { + for (var x = 0; x < element.length; x++) { + if (element[x] instanceof Node) { + _toggleHandler(element[x], arguments[1], arguments[2], arguments[3]); + } + } + return; + } + + // If a single node is passed, bind the event listener for (var i = 0; i < events.length; i++) { element[toggle ? "addEventListener" : "removeEventListener"](events[i], callback, false); } @@ -332,6 +343,35 @@ _toggleHandler(element, events, callback, false); } + // Trigger event + function _triggerEvent(element, event) { + // Create faux event + var fauxEvent = document.createEvent("MouseEvents"); + + // Set the event type + fauxEvent.initEvent(event, true, true); + + // Dispatch the event + element.dispatchEvent(fauxEvent); + } + + // Toggle checkbox + function _toggleCheckbox(event) { + // Only listen for return key + if(event.keyCode && event.keyCode != 13) { + return true; + } + + // 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"); + } + // Get percentage function _getPercentage(current, max) { if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) { @@ -496,7 +536,7 @@ if (config.captions.defaultActive) { _toggleClass(player.container, config.classes.captions.active, true); - player.buttons.captions.setAttribute("checked", "checked"); + player.buttons.captions.setAttribute("checked", ""); } } @@ -590,9 +630,12 @@ player.buttons.restart = _getElement(config.selectors.buttons.restart); player.buttons.rewind = _getElement(config.selectors.buttons.rewind); player.buttons.forward = _getElement(config.selectors.buttons.forward); + player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + + // Inputs player.buttons.mute = _getElement(config.selectors.buttons.mute); player.buttons.captions = _getElement(config.selectors.buttons.captions); - player.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + player.checkboxes = _getElements("[type='checkbox']"); // Progress player.progress = {}; @@ -899,7 +942,11 @@ } // Set the current time - player.media.currentTime = targetTime.toFixed(1); + // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans + try { + player.media.currentTime = targetTime.toFixed(1); + } + catch(e) {} // Logging _log("Seeking to " + player.media.currentTime + " seconds"); @@ -1224,22 +1271,6 @@ // Handle user exiting fullscreen by escaping etc _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); - - // Click video - if(player.type === "video" && config.click) { - _on(player.videoContainer, "click", function() { - if(player.media.paused) { - _play(); - } - else if(player.media.ended) { - _seek(); - _play(); - } - else { - _pause(); - } - }); - } // Time change on media _on(player.media, "timeupdate seeking", _timeUpdate); @@ -1251,15 +1282,18 @@ _on(player.buttons.seek, "change input", _seek); // Captions - _on(player.buttons.captions, "click", function() { + _on(player.buttons.captions, "change", function() { _toggleCaptions(this.checked); }); - // Clear captions at end of video + // Handle the media finishing _on(player.media, "ended", function() { + // Clear if(player.type === "video") { player.captionsContainer.innerHTML = ""; } + + // Reset UI _checkPlaying(); }); @@ -1277,6 +1311,25 @@ // Loading _on(player.media, "waiting canplay seeked", _checkLoading); + + // Toggle checkboxes on return key (as they look like buttons) + _on(player.checkboxes, "keyup", _toggleCheckbox); + + // Click video + if(player.type === "video" && config.click) { + _on(player.videoContainer, "click", function() { + if(player.media.paused) { + _play(); + } + else if(player.media.ended) { + _seek(); + _play(); + } + else { + _pause(); + } + }); + } } function _init() { @@ -1324,9 +1377,14 @@ // Listeners _listeners(); + + // Successful setup + return true; } - _init(); + if(!_init()) { + return {}; + } return { media: player.media, @@ -1357,7 +1415,8 @@ } // Get the players - var elements = document.querySelectorAll(config.selectors.container), players = []; + var elements = document.querySelectorAll(config.selectors.container), + players = []; // Create a player instance for each element for (var i = elements.length - 1; i >= 0; i--) { @@ -1373,7 +1432,11 @@ // Setup a player instance and add to the element if(typeof element.plyr === "undefined") { - element.plyr = new Plyr(element); + // Create new instance + var instance = new Plyr(element); + + // Set plyr to false if setup failed + element.plyr = (Object.keys(instance).length ? instance : false); } // Add to return array @@ -1382,4 +1445,4 @@ return players; } -}(this.plyr = this.plyr || {})); +}(this.plyr = this.plyr || {}));
\ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index 8b5f3d8d..349f945e 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -524,13 +524,13 @@ z-index: 10000000; background: #000; + video { + height: 100%; + } .player-video-wrapper { height: 100%; width: 100%; - video { - height: 100%; - } .player-captions { top: auto; bottom: 90px; diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index d1402706..748ab2a8 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -532,13 +532,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size z-index: 10000000; background: #000; + video { + height: 100%; + } .player-video-wrapper { height: 100%; width: 100%; - video { - height: 100%; - } .player-captions { top: auto; bottom: 90px; |