From 26bd4d08334c6a93aeb5fdde0cfe76c7acae56f1 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 2 Mar 2015 20:16:44 +1100 Subject: Fix for fullscreen issues on Firefox Fixes #38 --- src/js/plyr.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 034b4d56..67d77e20 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.0.17 +// plyr.js v1.0.19 // https://github.com/sampotts/plyr // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ @@ -795,12 +795,12 @@ } // Toggle fullscreen - function _toggleFullscreen() { + function _toggleFullscreen(event) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; // If it's a fullscreen change event, it's probably a native close - if(event.type === fullscreen.fullScreenEventName) { + if(event && event.type === fullscreen.fullScreenEventName) { config.fullscreen.active = fullscreen.isFullScreen(); } // If there's native support, use it -- cgit v1.2.3 From 4d483bf66c8985ce21b22107653ae0b1a65636c3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 4 Mar 2015 08:08:38 +1100 Subject: Bug fixes and improvements --- src/js/plyr.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 6 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 67d77e20..e8d852e8 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,7 +1,8 @@ // ========================================================================== // Plyr -// plyr.js v1.0.19 +// plyr.js v1.0.20 // https://github.com/sampotts/plyr +// License: The MIT License (MIT) // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== @@ -67,7 +68,65 @@ }, storage: { enabled: true - } + }, + html: (function() { + return ["
", + "
", + "", + "0% played", + "", + "", + "0% buffered", + "", + "
", + "", + "", + "", + "", + "", + "", + "", + "Time", + "00:00", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "", + "
"].join("\n"); + })() }; // Debugging @@ -489,11 +548,11 @@ // Setup aria attributes function _setupAria() { - var label = player.buttons.play.innerText; + var label = player.buttons.play.innerText || "Play"; // If there's a media title set, use that for the label if (typeof(config.title) !== "undefined" && config.title.length) { - label = player.buttons.play.innerText + ", " + config.title; + label += ", " + config.title; } player.buttons.play.setAttribute("aria-label", label); @@ -974,8 +1033,9 @@ // Fast forward _on(player.buttons.forward, "click", _forward); - // Get the HTML5 range input element and append audio volume adjustment on change - _on(player.volume, "change", function() { + // Get the HTML5 range input element and append audio volume adjustment on change/input + // IE10 doesn't support the "input" event so they have to wait for change + _on(player.volume, "change input", function() { _setVolume(this.value); }); -- cgit v1.2.3 From 3459387f0437913d462377904971bfc65362dfdc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 4 Mar 2015 21:28:25 +1100 Subject: Updated icons to make them more obvious --- src/js/plyr.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index e8d852e8..f91985ae 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -81,7 +81,7 @@ "", "", "", "", "", -- cgit v1.2.3 From 93e3f7cdd9f0e52b8c5d293c9caa6eaaadfb2718 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 5 Mar 2015 00:41:42 +1100 Subject: WIP on better seeking --- src/js/plyr.js | 89 +++++++++++++++++++++++++--------------------------------- 1 file changed, 39 insertions(+), 50 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index f91985ae..86144e9d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -24,6 +24,7 @@ container: ".player", controls: ".player-controls", buttons: { + seek: "[data-player='seek']", play: "[data-player='play']", pause: "[data-player='pause']", restart: "[data-player='restart']", @@ -40,8 +41,7 @@ played: ".player-progress-played" }, captions: ".player-captions", - duration: ".player-duration", - seekTime: ".player-seek-time" + duration: ".player-duration" }, classes: { video: "player-video", @@ -72,6 +72,8 @@ html: (function() { return ["
", "
", + "", + "", "", "0% played", "", @@ -86,7 +88,7 @@ "", "", "", "", "", "Time", @@ -275,33 +277,6 @@ return Math.floor((current / max) * 100); } - // Get click position relative to parent - // http://www.kirupa.com/html5/getting_mouse_click_position.htm - function _getClickPosition(event) { - var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget); - - return { - x: event.clientX - parentPosition.x, - y: event.clientY - parentPosition.y - }; - } - // Get element position - function _getPosition(element) { - var xPosition = 0; - var yPosition = 0; - - while (element) { - xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); - yPosition += (element.offsetTop - element.scrollTop + element.clientTop); - element = element.offsetParent; - } - - return { - x: xPosition, - y: yPosition - }; - } - // Deep extend/merge two Objects // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ // Removed call to arguments.callee (used explicit function name instead) @@ -509,6 +484,7 @@ // Buttons player.buttons = {}; + player.buttons.seek = _getElement(config.selectors.buttons.seek); player.buttons.play = _getElement(config.selectors.buttons.play); player.buttons.pause = _getElement(config.selectors.buttons.pause); player.buttons.restart = _getElement(config.selectors.buttons.restart); @@ -757,13 +733,6 @@ } } - // Setup seeking - function _setupSeeking() { - // Update number of seconds in rewind and fast forward buttons - player.seekTime[0].innerHTML = config.seekTime; - player.seekTime[1].innerHTML = config.seekTime; - } - // Setup fullscreen function _setupFullscreen() { if(player.type === "video" && config.fullscreen.enabled) { @@ -973,8 +942,21 @@ progress = player.progress.played.bar; text = player.progress.played.text; value = _getPercentage(player.media.currentTime, player.media.duration); + + // Set seeking value + player.buttons.seek.value = value; + break; + // Seeking + case "change": + case "input": + progress = player.progress.played.bar; + text = player.progress.played.text; + value = event.target.value; + break; + + // Check buffer status case "playing": case "progress": @@ -996,6 +978,8 @@ progress.value = value; text.innerHTML = value; } + + //_log(event); } // Update the displayed play time @@ -1066,17 +1050,25 @@ }); } - // Duration - _on(player.media, "timeupdate", _updateTimeDisplay); + // Time change on media + _on(player.media, "timeupdate", function(event) { + // Duration + _updateTimeDisplay(); + // Playing progress + _updateProgress(event); + }); + + // Seek + _on(player.buttons.seek, "change input", function(event) { + // Update progress elements + _updateProgress(event); - // Playing progress - _on(player.media, "timeupdate", _updateProgress); + // Update the text label + _updateTimeDisplay(); + + // Seek to the selected time + player.media.currentTime = ((this.value / this.max) * player.media.duration); - // Skip when clicking progress bar - _on(player.progress.played.bar, "click", function(event) { - player.pos = _getClickPosition(event).x / this.offsetWidth; - player.media.currentTime = player.pos * player.media.duration; - // Special handling for "manual" captions if (!player.isTextTracks && player.type === "video") { _adjustManualCaptions(player); @@ -1154,9 +1146,6 @@ // Setup fullscreen _setupFullscreen(); - // Seeking - _setupSeeking(); - // Listeners _listeners(); } -- cgit v1.2.3