I have introduced an internal variable IV01_01 to store data/text for the metadata I require. Basically it should tell me out of 3 videos playing (you can go from one video to another by scrolling) how many seconds had 1 video been watched for all of them, how many times and in which order. I am not sure if my implementation is wrong or not since I am having problems with only storing this metadata and not playing videos and scrolling part.
videos über scibo
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
background: transparent;
}
.tiktok-container {
height: 55vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
background: transparent;
}
.tiktok-item {
position: relative;
height: 55vh;
scroll-snap-align: start;
background-color: ##fff;
display: flex;
justify-content: center;
align-items: center;
}
.player-wrapper {
width: auto;
height: 100%;
background: transparent;
position: relative;
transition: opacity 0.4s ease;
opacity: 0.6; /* inaktiv: etwas ausgeblendet */
}
.player-wrapper video {
height: 100%;
width: auto;
display: block;
margin: auto;
}
.tiktok-overlay {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 10;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
color: #fff;
font-size: 14px;
}
.active {
opacity: 1 !important;
}
var videoList = [
{ id: 'video1', src: 'https://uni-duisburg-essen.sciebo.de/s/YhrGEzGF5jbHqCA/download', label: 'Video 1' },
{ id: 'video2', src: 'https://uni-duisburg-essen.sciebo.de/s/33UBk0sF5QplmOo/download', label: 'Video 2' },
{ id: 'video3', src: 'https://uni-duisburg-essen.sciebo.de/s/BIOmfLMWX85XzKX/download', label: 'Video 3' }
];
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
videoList = shuffleArray(videoList);
var container = document.getElementById('Container');
videoList.forEach(function(video) {
var item = document.createElement('div');
item.className = 'tiktok-item';
var playerWrapper = document.createElement('div');
playerWrapper.className = 'player-wrapper';
playerWrapper.id = video.id;
var videoElem = document.createElement('video');
videoElem.setAttribute('playsinline', '');
videoElem.setAttribute('muted', '');
videoElem.setAttribute('loop', '');
videoElem.setAttribute('preload', 'auto');
videoElem.src = video.src;
playerWrapper.appendChild(videoElem);
var overlay = document.createElement('div');
overlay.className = 'tiktok-overlay';
overlay.innerHTML = '<p>' + (video.label || '') + '</p>';
item.appendChild(playerWrapper);
item.appendChild(overlay);
container.appendChild(item);
});
var videoStats = {
viewCounts: {},
viewDurations: {},
displayOrder: []
};
var currentVisibleVideoId = null;
var currentViewStart = null;
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.intersectionRatio >= 0.75) {
var newVideoId = entry.target.querySelector('.player-wrapper').id;
if (currentVisibleVideoId !== newVideoId) {
if (currentVisibleVideoId !== null && currentViewStart) {
var elapsed = Date.now() - currentViewStart;
videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
var prevVideoElem = document.querySelector('#' + currentVisibleVideoId + ' video');
if (prevVideoElem) {
prevVideoElem.pause();
document.getElementById(currentVisibleVideoId).classList.remove('active');
}
}
currentVisibleVideoId = newVideoId;
currentViewStart = Date.now();
videoStats.viewCounts[newVideoId] = (videoStats.viewCounts[newVideoId] || 0) + 1;
videoStats.displayOrder.push(newVideoId);
var currentVideoElem = document.querySelector('#' + newVideoId + ' video');
if (currentVideoElem) {
document.getElementById(newVideoId).classList.add('active');
currentVideoElem.play();
}
}
}
});
}, { threshold: [0.75] });
document.querySelectorAll('.tiktok-item').forEach(function(item) {
observer.observe(item);
});
function scrollToItem(index) {
var items = document.querySelectorAll('.tiktok-item');
if (index < 0) index = 0;
if (index >= items.length) index = items.length - 1;
items[index].scrollIntoView({ behavior: 'smooth' });
}
document.addEventListener('keydown', function(e) {
var items = document.querySelectorAll('.tiktok-item');
var currentIndex = 0;
items.forEach(function(item, i) {
if (item.querySelector('.player-wrapper').id === currentVisibleVideoId) {
currentIndex = i;
}
});
if (e.key === 'ArrowDown') {
e.preventDefault();
scrollToItem(currentIndex + 1);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
scrollToItem(currentIndex - 1);
}
});
function updateHiddenInput() {
document.getElementsByName('IV01_01')[0].value = JSON.stringify(videoStats);
}
window.addEventListener('beforeunload', function() {
if (currentVisibleVideoId && currentViewStart) {
var elapsed = Date.now() - currentViewStart;
videoStats.viewDurations[currentVisibleVideoId] = (videoStats.viewDurations[currentVisibleVideoId] || 0) + elapsed;
}
updateHiddenInput();
});