loop clips
This commit is contained in:
parent
b4529aaab3
commit
ffb7948fff
1 changed files with 23 additions and 29 deletions
|
@ -25,13 +25,7 @@ async function pandoraAPI(action, data) {
|
|||
return cache[key]
|
||||
}
|
||||
|
||||
function updatePlayerPosition(video, lastKnownScrollPosition) {
|
||||
console.log('update', lastKnownScrollPosition)
|
||||
video.style.top = lastKnownScrollPosition + 'px'
|
||||
video.style.display = 'block';
|
||||
}
|
||||
|
||||
function updatePlayer(video, frame, currentTime, src) {
|
||||
function updatePlayer(video, frame, currentTime, out, src) {
|
||||
var rect = frame.getBoundingClientRect();
|
||||
video.style.opacity = 0
|
||||
console.log('update player', rect)
|
||||
|
@ -42,6 +36,8 @@ function updatePlayer(video, frame, currentTime, src) {
|
|||
}
|
||||
//video.poster = frame.querySelector('img').src
|
||||
video.currentTime = currentTime
|
||||
video.dataset.in = currentTime
|
||||
video.dataset.out = out
|
||||
video.controls = true
|
||||
video.play()
|
||||
video.style.opacity = 1
|
||||
|
@ -70,6 +66,16 @@ function onVisibilityChange(el, callback) {
|
|||
}
|
||||
}
|
||||
|
||||
function timeupdate(event) {
|
||||
if (event.target.dataset.out && event.target.dataset.in) {
|
||||
var in_= parseFloat(event.target.dataset.in)
|
||||
var out_= parseFloat(event.target.dataset.out)
|
||||
if (event.target.currentTime >= out_) {
|
||||
event.target.currentTime = in_
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadItem(config) {
|
||||
pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
|
||||
var ascroll = document.querySelector('#ascroll')
|
||||
|
@ -79,9 +85,11 @@ function loadItem(config) {
|
|||
video.classList.add('player')
|
||||
video.muted = true
|
||||
video.src = `${baseURL}/${config.item}/480p.webm`
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
ascroll.appendChild(video)
|
||||
|
||||
var h1 = document.createElement('h1')
|
||||
var first
|
||||
h1.innerHTML = response.data.title
|
||||
ascroll.appendChild(h1)
|
||||
|
||||
|
@ -89,6 +97,9 @@ function loadItem(config) {
|
|||
if (config.user && annotation.user != config.user) {
|
||||
return
|
||||
}
|
||||
if (!first) {
|
||||
first = annotation
|
||||
}
|
||||
var div = document.createElement('div')
|
||||
div.classList.add('annotation')
|
||||
div.innerHTML = `
|
||||
|
@ -100,14 +111,14 @@ function loadItem(config) {
|
|||
var frame = div.querySelector('.frame')
|
||||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
if (loaded && visible)
|
||||
updatePlayer(video, frame, annotation['in'])
|
||||
updatePlayer(video, frame, annotation['in'], annotation['out'])
|
||||
|
||||
}))
|
||||
})
|
||||
loaded = true
|
||||
let frame = ascroll.querySelector('.annotation .frame')
|
||||
if (frame) {
|
||||
updatePlayer(video, frame, 0)
|
||||
updatePlayer(video, frame, first['in'], first['out'])
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -135,9 +146,7 @@ function loadEdit(config) {
|
|||
var video = document.createElement('video')
|
||||
video.classList.add('player')
|
||||
video.muted = true
|
||||
/*
|
||||
video.src = `${baseURL}/${config.item}/480p.webm`
|
||||
*/
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
ascroll.appendChild(video)
|
||||
|
||||
var h1 = document.createElement('h1')
|
||||
|
@ -171,7 +180,7 @@ function loadEdit(config) {
|
|||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
|
||||
if (loaded && visible)
|
||||
updatePlayer(video, frame, annotation['in'], src)
|
||||
updatePlayer(video, frame, annotation['in'], annotation['out'], src)
|
||||
|
||||
}))
|
||||
})
|
||||
|
@ -180,23 +189,8 @@ function loadEdit(config) {
|
|||
let frame = ascroll.querySelector('.annotation .frame')
|
||||
if (frame) {
|
||||
var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
|
||||
updatePlayer(video, frame, first['in'], src)
|
||||
updatePlayer(video, frame, first['in'], first['out'], src)
|
||||
}
|
||||
|
||||
/*
|
||||
document.addEventListener('scroll', function(e) {
|
||||
lastKnownScrollPosition = window.scrollY;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(function() {
|
||||
updatePlayerPosition(video, lastKnownScrollPosition);
|
||||
ticking = false;
|
||||
});
|
||||
|
||||
ticking = true;
|
||||
}
|
||||
})
|
||||
*/
|
||||
})
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue