138 lines
4.2 KiB
JavaScript
138 lines
4.2 KiB
JavaScript
|
|
var videoExtension
|
|
|
|
function setVideoSrc(video, src) {
|
|
var ext
|
|
if (!videoExtension) {
|
|
[
|
|
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
|
|
['video/webm; codecs="vp8, vorbis"', '.webm'],
|
|
].forEach(opt => {
|
|
if (videoExtension) { return }
|
|
if (video.canPlayType(opt[0]).replace('no', '')) {
|
|
videoExtension = opt[1]
|
|
}
|
|
})
|
|
}
|
|
src = src.replace('.webm', videoExtension)
|
|
if (src != video.src) {
|
|
video.src = src
|
|
}
|
|
}
|
|
|
|
function scrollTo(element) {
|
|
var delta = element.offsetTop - document.scrollingElement.scrollTop,
|
|
duration = 1000, t = 40, n = duration / t,
|
|
step = delta / n;
|
|
|
|
function scroll() {
|
|
if (document.scrollingElement.scrollTop + step > element.offsetTop) {
|
|
document.scrollingElement.scrollTop = element.offsetTop
|
|
n = 0
|
|
} else {
|
|
document.scrollingElement.scrollTop += step
|
|
}
|
|
n--
|
|
if (n) setTimeout(scroll, t)
|
|
}
|
|
scroll()
|
|
}
|
|
|
|
function showOverlay(event) {
|
|
//console.log('show overlay', event.target, event)
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
document.querySelectorAll('#video-overlay').forEach(element => element.remove())
|
|
var video = event.target
|
|
var rect = video.getBoundingClientRect();
|
|
if (video._frame) {
|
|
rect = video._frame.getBoundingClientRect();
|
|
}
|
|
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 + 'px'
|
|
overlay.style.position = 'absolute'
|
|
overlay.style.display = 'flex'
|
|
overlay.style.alignItems = 'center'
|
|
overlay.style.justifyContent = 'center'
|
|
//overlay.style.fontSize = '45px'
|
|
video.controls = false
|
|
|
|
var off = `<span class="annotation-icon-wrapper animated"><span class="text f-icon-volume_off annotation-icon"></span>`
|
|
var on = `<span class="annotation-icon-wrapper"><span class="f-icon-volume_down annotation-icon"></span></span>`
|
|
|
|
if (video.muted) {
|
|
overlay.innerHTML = off
|
|
} else {
|
|
overlay.innerHTML = on
|
|
}
|
|
overlay.addEventListener('click', event=> {
|
|
const muted = video.muted
|
|
document.querySelectorAll('pandora-scroll').forEach(el => el.mute() )
|
|
video.muted = !muted
|
|
if (video.muted) {
|
|
overlay.innerHTML = off
|
|
} else {
|
|
overlay.innerHTML = on
|
|
}
|
|
})
|
|
var timeout = setTimeout(() => {
|
|
video.controls = false
|
|
overlay.remove()
|
|
}, 3000)
|
|
overlay.addEventListener('mousemove', event=> {
|
|
clearTimeout(timeout)
|
|
timeout = setTimeout(() => {
|
|
video.controls = false
|
|
overlay.remove()
|
|
}, 500)
|
|
})
|
|
video.parentElement.appendChild(overlay)
|
|
|
|
}
|
|
|
|
function isInside(config, annotation) {
|
|
if (!config['in'] && !config['out']) {
|
|
return true
|
|
}
|
|
if (annotation['in'] < config['out'] && annotation['out'] > config['in']) {
|
|
annotation['in'] = Math.max(annotation['in'], config['in'])
|
|
annotation['out'] = Math.min(annotation['out'], config['out'])
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
function isElementInViewport (el) {
|
|
var rect = el.getBoundingClientRect();
|
|
return (
|
|
rect.top >= 0 &&
|
|
rect.left >= 0 &&
|
|
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
|
|
Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
|
|
);
|
|
}
|
|
|
|
function onVisibilityChange(el, callback) {
|
|
var old_visible;
|
|
return function () {
|
|
var visible = isElementInViewport(el);
|
|
if (visible != old_visible) {
|
|
old_visible = visible;
|
|
if (visible) {
|
|
el.classList.add('visible')
|
|
} else {
|
|
el.classList.remove('visible')
|
|
}
|
|
if (typeof callback == 'function') {
|
|
callback(visible);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function parseTime(value) {
|
|
return value.split(":").map(p => parseFloat(p)).reduce((c, p) => { return c*60 + p}, 0)
|
|
}
|