Hi, what am i doing wrong in my sample test code? when switching the video clip, the video would be play from the beginning of the clip

[shlgh]

<title>Dynamic Video Player</title> <style> .container-vshowcase { display: flex; margin-bottom: 20px; width: 100%; } .player-container, .video-list-container { margin: 10px; } .main-video { width: 640px; } .list { cursor: pointer; } .list.active { font-weight: bold; pointer-events: none; } </style> <script src="https://player.vimeo.com/api/player.js"></script>

clip-1

Last played time: 0:00 Total played time: 0:00

`

clip-1

clip-2

<script> document.addEventListener("DOMContentLoaded", function() { var activeItem = document.querySelector('.list.active'); var initialVideoId = activeItem.getAttribute('data-video-id'); var initialVideoTitle = activeItem.querySelector('.list-title').innerText; var option = { id: initialVideoId, width: 640 }; var videoPlayer = new Vimeo.Player('main-video-play', option); videoPlayer.on('play', function() { console.log('Played the video in main-video-play div'); }); var videoListItems = document.querySelectorAll('.list'); var mainVidTitle = document.querySelector('.main-vid-title'); var currentTimeDisplay = document.querySelector('.current-time'); var playedTimeDisplay = document.querySelector('.played-time'); var lastPlayedTimes = {}; // Store last played times for each video // Set initial video title mainVidTitle.innerText = initialVideoTitle; videoListItems.forEach(function(item) { item.addEventListener('click', function() { var videoId = this.getAttribute('data-video-id'); var videoTitle = this.querySelector('.list-title').innerText; // Save the current time of the active video var activeVideoId = activeItem.getAttribute('data-video-id'); videoPlayer.getCurrentTime().then(function(seconds) { lastPlayedTimes[activeVideoId] = seconds; }); // Load the new video videoPlayer.loadVideo(videoId).then(function() { mainVidTitle.innerText = videoTitle; // Remove 'active' class from all items videoListItems.forEach(function(item) { item.classList.remove('active'); }); // Add 'active' class to the clicked item item.classList.add('active'); // Reset time displays currentTimeDisplay.innerText = 'Last played time: 0:00'; playedTimeDisplay.innerText = 'Total played time: 0:00'; // Resume from last played time if available if (lastPlayedTimes[videoId] !== undefined) { videoPlayer.setCurrentTime(lastPlayedTimes[videoId]).then(function(seconds) { console.log('Resumed from last played time: ' + seconds); // Autoplay the video after setting the time videoPlayer.play(); }).catch(function(error) { console.error('Error setting video time: ', error); }); } else { // Autoplay the video if no last played time videoPlayer.play(); } // Log video play console.log('Playing video ID: ' + videoId); // Update active item activeItem = item; }).catch(function(error) { console.error('Error loading video: ', error); }); }); }); videoPlayer.on('timeupdate', function(data) { var currentTime = data.seconds; var minutes = Math.floor(currentTime / 60); var seconds = Math.floor(currentTime % 60); currentTimeDisplay.innerText = 'Last played time: ' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds; }); videoPlayer.on('pause', function(data) { var activeVideoId = activeItem.getAttribute('data-video-id'); lastPlayedTimes[activeVideoId] = data.seconds; }); }); </script>

hopefully, i post this corrent in this forum.