toggle mute overlay
This commit is contained in:
parent
2abeacccb6
commit
c6e0d20e77
1 changed files with 47 additions and 2 deletions
|
@ -24,20 +24,26 @@ async function pandoraAPI(action, data) {
|
|||
function updatePlayer(video, frame, currentTime, out, src) {
|
||||
var rect = frame.getBoundingClientRect();
|
||||
video.style.opacity = 0
|
||||
console.log('update player', rect)
|
||||
video.style.top = (rect.top + window.scrollY) + 'px'
|
||||
video.style.display = 'block';
|
||||
if (src) {
|
||||
video.src = src
|
||||
}
|
||||
//video.poster = frame.querySelector('img').src
|
||||
var muted = video.muted
|
||||
video.muted = true
|
||||
video.currentTime = currentTime
|
||||
video.dataset.in = currentTime
|
||||
video.dataset.out = out
|
||||
video.controls = true
|
||||
video._frame = frame
|
||||
video.play()
|
||||
const show = event => {
|
||||
video.style.opacity = 1
|
||||
video.muted = muted
|
||||
video.removeEventListener('seeked', show)
|
||||
}
|
||||
video.addEventListener('seeked', show)
|
||||
video.play()
|
||||
}
|
||||
|
||||
function isElementInViewport (el) {
|
||||
|
@ -118,6 +124,43 @@ function formatInfo(config, ascroll) {
|
|||
ascroll.appendChild(div)
|
||||
}
|
||||
|
||||
function showOverlay(event) {
|
||||
document.querySelectorAll('#video-overlay').forEach(element => element.remove())
|
||||
console.log('showOverlay')
|
||||
var video = event.target
|
||||
var rect = video.getBoundingClientRect();
|
||||
console.log(rect)
|
||||
var overlay = document.createElement('div')
|
||||
overlay.id = 'video-overlay'
|
||||
overlay.style.top = video.style.top
|
||||
overlay.style.width = rect.width + 'px'
|
||||
overlay.style.height = (rect.height - 40) + 'px'
|
||||
overlay.style.position = 'absolute'
|
||||
overlay.style.display = 'flex'
|
||||
overlay.style.alignItems = 'center'
|
||||
overlay.style.justifyContent = 'center'
|
||||
overlay.style.fontSize = '45px'
|
||||
|
||||
if (video.muted) {
|
||||
overlay.innerHTML = `🔇`
|
||||
} else {
|
||||
overlay.innerHTML = `🔊`
|
||||
}
|
||||
overlay.addEventListener('click', event=> {
|
||||
video.muted = !video.muted
|
||||
if (video.muted) {
|
||||
overlay.innerHTML = `🔇`
|
||||
} else {
|
||||
overlay.innerHTML = `🔊`
|
||||
}
|
||||
})
|
||||
overlay.addEventListener('mouseleave', event=> {
|
||||
overlay.remove()
|
||||
})
|
||||
video.parentElement.appendChild(overlay)
|
||||
console.log(overlay)
|
||||
}
|
||||
|
||||
function loadItem(config) {
|
||||
pandoraAPI('get', {id: config.item, keys: [
|
||||
'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
|
||||
|
@ -133,6 +176,8 @@ function loadItem(config) {
|
|||
video.muted = true
|
||||
video.src = `${baseURL}/${config.item}/480p.webm`
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
video.addEventListener('touchstart', showOverlay)
|
||||
video.addEventListener('mouseover', showOverlay)
|
||||
ascroll.appendChild(video)
|
||||
|
||||
var first
|
||||
|
|
Loading…
Reference in a new issue