From 4ccdd5391eff8cc41748248cc83fd9acce8369f2 Mon Sep 17 00:00:00 2001 From: Michael Fabian 'Xaymar' Dirks Date: Sun, 27 Nov 2022 01:45:02 +0100 Subject: [PATCH] Fix non-standard behavior --- .../2022-01-10-h264-encoder-showdown.html | 2 +- assets/site.js | 116 +++++++++--------- 2 files changed, 62 insertions(+), 56 deletions(-) diff --git a/_posts/2022/2022-01-10-h264-encoder-showdown.html b/_posts/2022/2022-01-10-h264-encoder-showdown.html index 4310716..142b556 100644 --- a/_posts/2022/2022-01-10-h264-encoder-showdown.html +++ b/_posts/2022/2022-01-10-h264-encoder-showdown.html @@ -72,7 +72,7 @@ videos: {% for bitrate in page.videos.bitrates %} {% for resolution in page.videos.resolutions %} {% for encoder in page.videos.encoders %} - {% assign real_url = encoder.url | replace: ":video", video.id | replace: ":res", resolution | replace: ":rate", bitrate | absolute_url%} + {% assign real_url = encoder.url | replace: ":video", video.id | replace: ":res", resolution | replace: ":rate", bitrate | absolute_url %} {% endfor %} {% endfor %} diff --git a/assets/site.js b/assets/site.js index d096a1a..b2c62ec 100644 --- a/assets/site.js +++ b/assets/site.js @@ -104,51 +104,45 @@ async function xmr_initialize_player(el) { // Time let playback_time = el.querySelector(".time"); playback_time.update = function() { - let duration_text = ""; - let need_hour = false; - if (isNaN(media.duration)) { - duration_text = "Error"; - } else if (!isFinite(media.duration)) { - duration_text = "Unknown"; + function formatSeconds(seconds, with_ms, with_minutes, with_hour) { + let result = []; + if (isFinite(seconds) && !isNaN(seconds)) { + let tainted_seconds = seconds % 60; + let pure_seconds = Math.floor(seconds % 60); + let tainted_minutes = ((seconds - pure_seconds) / 60); + let pure_minutes = Math.floor(tainted_minutes % 60); + let pure_hours = Math.floor((tainted_minutes - pure_minutes) / 60); + + result.unshift(`${pure_seconds.toString(10).padStart(2, '0')}`); + if (with_ms) { + result[0] = `${result[0]}.${Math.floor((tainted_seconds % 1) * 100).toString(10).padStart(2, '0')}` + } + if ((with_minutes === true) || ((with_minutes === undefined) && (pure_minutes > 0))) { + result[0] = result[0].padStart(2, '0'); + result.unshift(`${pure_minutes.toString(10)}`); + } + if ((with_hour === true) || ((with_hour === undefined) && (pure_hours > 0))) { + result[0] = result[0].padStart(2, '0'); + result.unshift(`${pure_hours.toString(10)}`); + } + } + return result; + } + + let duration = formatSeconds(media.duration, true); + let current = formatSeconds(media.currentTime, true, duration.length >= 2, duration.length >= 3); + for (let idx in duration) { + current[idx].padStart(duration[idx].length, '0'); + } + + if (duration.length > 0) { + playback_time.innerText = `${current.join(':')} / ${duration.join(':')}`; } else { - let dur = media.duration; - let s = dur % 60; - let m0 = (dur - s) / 60; - let m = m0 % 60; - let h = (m0 - m) / 60; - - let ss = Math.floor(s).toString().padStart(2, '0'); - let ms = Math.floor(m).toString().padStart(2, '0'); - - if (h > 0) { - duration_text = `${h}:${ms}:${ss}`; - need_hour = true; - } else { - duration_text = `${ms}:${ss}`; - } + playback_time.innerText = `${current.join(':')}`; } - - let current_text = ""; - { - let dur = media.currentTime; - let s = dur % 60; - let m0 = (dur - s) / 60; - let m = m0 % 60; - let h = (m0 - m) / 60; - - let ss = Math.floor(s).toString().padStart(2, '0'); - let ms = Math.floor(m).toString().padStart(2, '0'); - - if (need_hour) { - current_text = `${h}:${ms}:${ss}`; - } else { - current_text = `${ms}:${ss}`; - } - } - - playback_time.innerText = `${current_text} / ${duration_text}`; } media.addEventListener("timeupdate", () => { playback_time.update(); }); + media.addEventListener("durationupdate", () => { playback_progress.update(); }); media.addEventListener("loadedmetadata", () => { playback_time.update(); }); playback_time.update(); @@ -161,9 +155,13 @@ async function xmr_initialize_player(el) { playback_progress.value = media.currentTime * 100; } playback_progress.addEventListener("input", () => { - media.currentTime = parseInt(playback_progress.value, 10) / 100; + if (isFinite(media.duration)) { + media.currentTime = parseInt(playback_progress.value, 10) / 100; + } }); media.addEventListener("timeupdate", () => { playback_progress.update(); }); + media.addEventListener("durationupdate", () => { playback_progress.update(); }); + media.addEventListener("loadeddata", () => { playback_progress.update(); }); media.addEventListener("loadedmetadata", () => { playback_progress.update(); }); playback_progress.update(); @@ -228,25 +226,33 @@ async function xmr_initialize_player(el) { // Variants let variant = el.querySelector(".variant"); variant.update = function() { + // Store current state and pause. let paused = media.paused; let muted = media.muted; let volume = media.volume; let time = media.currentTime; - media.pause(); - media.currentSrc = variant.value; - media.play(); - - media.currentTime = time; - media.volume = volume; - media.muted = muted; - if (paused) { - media.pause(); - } else { - media.play(); - } - play_pause.update(); + + // Tell the media source to begin loading. + media.src = variant.value; + media.load(); + media.currentTime = time; + + media.addEventListener("canplay", () => { + media.currentTime = time; + media.volume = volume; + media.muted = muted; + if (paused) { + media.pause(); + } else { + media.play(); + } + + play_pause.update(); + }, { + "once": true + }) } variant.addEventListener("input", () => { variant.update(); }); variant.addEventListener("value", () => { variant.update(); });