diff --git a/static/mobile/js/VideoElement.js b/static/mobile/js/VideoElement.js index 8238d95d..9abe27d9 100644 --- a/static/mobile/js/VideoElement.js +++ b/static/mobile/js/VideoElement.js @@ -8,6 +8,7 @@ VideoElement VideoElement Object loop loop playback playbackRate playback rate position start position + in start offset self Shared private variable ([options[, self]]) -> VideoElement Object loadedmetadata loadedmetadata @@ -38,6 +39,7 @@ window.VideoElement = function(options) { muted: false, playbackRate: 1, position: 0, + "in": 0, volume: 1 } Object.assign(self.options, options); @@ -166,9 +168,10 @@ window.VideoElement = function(options) { function getCurrentTime() { var item = self.items[self.currentItem]; - return self.seeking || self.loading + var currentTime = self.seeking || self.loading ? self.currentTime - : item ? item.position + self.video.currentTime - item['in'] : 0; + : item ? item.position + self.video.currentTime - item['in'] - self.options["in"] : 0; + return currentTime } function getset(key, value) { @@ -508,6 +511,7 @@ window.VideoElement = function(options) { } function setCurrentItemTime(currentTime) { + currentTime += self.options["in"] debug('Video', 'sCIT', currentTime, self.video.currentTime, 'delta', currentTime - self.video.currentTime); isReady(self.video, function(video) { diff --git a/static/mobile/js/VideoPlayer.js b/static/mobile/js/VideoPlayer.js index 95720e2d..b6e6ca57 100644 --- a/static/mobile/js/VideoPlayer.js +++ b/static/mobile/js/VideoPlayer.js @@ -10,6 +10,7 @@ window.VideoPlayer = function(options) { loop: false, muted: false, playbackRate: 1, + "in": 0, position: 0, volume: 1 } diff --git a/static/mobile/js/main.js b/static/mobile/js/main.js index c84b5260..421eacc2 100644 --- a/static/mobile/js/main.js +++ b/static/mobile/js/main.js @@ -67,6 +67,7 @@ function parseURL() { id = id.replace('/editor/', '/').replace('/player/', '/') type = "item" } + //console.log(type, id, args) return [type, id, args] } diff --git a/static/mobile/js/render.js b/static/mobile/js/render.js index 307c5d2f..40422e55 100644 --- a/static/mobile/js/render.js +++ b/static/mobile/js/render.js @@ -75,7 +75,8 @@ function renderItem(data) { var video = window.video = VideoPlayer({ items: data.videos, poster: data.poster, - position: data["in"] || 0, + "in": data["in"] || 0, + position: 0, duration: data.duration, aspectratio: data.aspectratio }) @@ -85,16 +86,10 @@ function renderItem(data) { video.addEventListener("loadedmetadata", event => { // }) - video.addEventListener("timeupdate", event => { - var currentTime = video.currentTime() - if (currentTime >= data['out']) { - if (!video.paused) { - video.pause() - } - video.currentTime(data['in']) - } + + function updateAnnotations(currentTime) { div.querySelectorAll('.annotation').forEach(annot => { - var now = currentTime + var now = currentTime + (data["in"] || 0) var start = parseFloat(annot.dataset.in) var end = parseFloat(annot.dataset.out) if (now >= start && now <= end) { @@ -107,8 +102,18 @@ function renderItem(data) { } } }) - + } + video.addEventListener("timeupdate", event => { + var currentTime = video.currentTime() + if ((currentTime + (data["in"] || 0)) >= data['out']) { + if (!video.paused) { + video.pause() + } + video.currentTime(0) + } + updateAnnotations(currentTime) }) + updateAnnotations(data["position"] || 0) if (item.next || item.previous) { var nav = document.createElement('nav') nav.classList.add('items')