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 From 1903b1bcdff0f1ac74b47cf071995b8c699e6de0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 5 Mar 2015 18:36:18 +1100 Subject: Seeking (still work in progress) --- src/js/plyr.js | 102 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 63 insertions(+), 39 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 86144e9d..6dfe29bc 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -274,7 +274,7 @@ // Get percentage function _getPercentage(current, max) { - return Math.floor((current / max) * 100); + return ((current / max) * 100).toFixed(2); } // Deep extend/merge two Objects @@ -781,19 +781,7 @@ if(typeof seekTime !== "number") { seekTime = config.seekTime; } - - var targetTime = player.media.currentTime - seekTime; - - if (targetTime < 0) { - player.media.currentTime = 0; - } - else { - player.media.currentTime = targetTime; - } - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } + _seek(player.media.currentTime - seekTime); } // Fast forward @@ -802,15 +790,43 @@ if(typeof seekTime !== "number") { seekTime = config.seekTime; } + _seek(player.media.currentTime + seekTime); + } + + // Seek to time + var _seek = function(input) { + //var value = config.seekTime; + var targetTime = 0; - var targetTime = player.media.currentTime + seekTime; + // If no event or time is passed, bail + if (typeof input === "undefined") { + return; + } + // Explicit position + else if (typeof input === "number") { + targetTime = input; + } + // Event + else if (input.type === "change" || input.type === "input") { + // It's the seek slider + // Seek to the selected time + targetTime = ((this.value / this.max) * player.media.duration).toFixed(1); + } + // Handle min and max values if (targetTime > player.media.duration) { player.media.currentTime = player.media.duration; } + else if (targetTime < 0) { + player.media.currentTime = 0; + } else { player.media.currentTime = targetTime; } + + // Logging + _log("Seeking to " + player.media.currentTime + " seconds"); + // Special handling for "manual" captions if (!player.isTextTracks && player.type === "video") { _adjustManualCaptions(player); @@ -939,16 +955,19 @@ switch(event.type) { // Video playing case "timeupdate": + case "seeking": 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; - + // Set seek range value only if it's a "natural" time event + if(event.type == "timeupdate") { + player.buttons.seek.value = value; + } + break; - // Seeking + // Events from seek range case "change": case "input": progress = player.progress.played.bar; @@ -995,6 +1014,13 @@ player.duration.innerHTML = player.mins + ":" + player.secs; } + function _timeUpdate(event) { + // Duration + _updateTimeDisplay(); + // Playing progress + _updateProgress(event); + } + // Listen for events function _listeners() { // Play @@ -1051,29 +1077,26 @@ } // Time change on media - _on(player.media, "timeupdate", function(event) { - // Duration - _updateTimeDisplay(); - // Playing progress - _updateProgress(event); - }); + _on(player.media, "timeupdate seeking", _timeUpdate); - // Seek - _on(player.buttons.seek, "change input", function(event) { - // Update progress elements - _updateProgress(event); - - // Update the text label - _updateTimeDisplay(); - - // Seek to the selected time - player.media.currentTime = ((this.value / this.max) * player.media.duration); - - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); + // Pause and resume while seeking + /*_on(player.media, "seeking", function() { + if(!player.media.paused && !player.seekPaused) { + player.seekPaused = true; + _pause(); } + _log("Seeking") }); + _on(player.media, "seeked", function() { + if(player.seekPaused) { + player.seekPaused = false; + _play(); + } + _log("Seeked") + });*/ + + // Seek + _on(player.buttons.seek, "change input", _seek); // Captions _on(player.buttons.captions, "click", function() { @@ -1159,6 +1182,7 @@ restart: _restart, rewind: _rewind, forward: _forward, + seek: _seek, setVolume: _setVolume, toggleMute: _toggleMute, toggleCaptions: _toggleCaptions -- cgit v1.2.3 From c6e5937debb0f9eef1bccf5a0318b287c28cbee6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 5 Mar 2015 22:38:25 +1100 Subject: Seeking improvements --- src/js/plyr.js | 148 ++++++++++++++++++++++++--------------------------------- 1 file changed, 63 insertions(+), 85 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 6dfe29bc..b16eb021 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -70,66 +70,68 @@ enabled: true }, html: (function() { - return ["
", - "
", - "", - "", - "", - "0% played", - "", - "", - "0% buffered", - "", - "
", - "", - "", - "", - "", - "", - "", - "", - "Time", - "00:00", + return [ + "
", + "
", + "", + "", + "", + "0% played", + "", + "", + "0% buffered", + "", + "
", + "", + "", + "", + "", + "", + "", + "", + "Time", + "00:00", + "", "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "", - "
"].join("\n"); - })() + "", + "", + "", + "", + "", + "", + "", + "", + "", + "
" + ].join("\n"); + })() }; // Debugging @@ -813,16 +815,8 @@ targetTime = ((this.value / this.max) * player.media.duration).toFixed(1); } - // Handle min and max values - if (targetTime > player.media.duration) { - player.media.currentTime = player.media.duration; - } - else if (targetTime < 0) { - player.media.currentTime = 0; - } - else { - player.media.currentTime = targetTime; - } + // Set the current time + player.media.currentTime = targetTime; // Logging _log("Seeking to " + player.media.currentTime + " seconds"); @@ -1079,22 +1073,6 @@ // Time change on media _on(player.media, "timeupdate seeking", _timeUpdate); - // Pause and resume while seeking - /*_on(player.media, "seeking", function() { - if(!player.media.paused && !player.seekPaused) { - player.seekPaused = true; - _pause(); - } - _log("Seeking") - }); - _on(player.media, "seeked", function() { - if(player.seekPaused) { - player.seekPaused = false; - _play(); - } - _log("Seeked") - });*/ - // Seek _on(player.buttons.seek, "change input", _seek); -- cgit v1.2.3