How I can implement this: Fetching random 15 videos from dbwhen a user play a video it will track how much time the user watch the video and insert it in the db using php mysql
I have the below code but its not working can anyone please help me with this
<div id="player"></div><script> var videoLinks = <?php echo json_encode($videoLinks); ?>; // Convert PHP array to JavaScript array var currentVideoIndex = 0; var startTime; var durationWatched = 0; var player; var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function onYouTubeIframeAPIReady() { createPlayer(); } function createPlayer() { var videoUrl = videoLinks[currentVideoIndex]; var videoId = getYouTubeVideoId(videoUrl); player = new YT.Player('player', { height: '520', width: '760', playerVars: {'playsinline': 1 }, events: {'onReady': function(event) { startTime = Date.now(); event.target.loadVideoById(videoId); event.target.playVideo(); setInterval(function() { updateDurationWatched(event.target); }, 1000); },'onStateChange': onPlayerStateChange } }); } function getYouTubeVideoId(url) { var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; var match = url.match(regExp); if (match && match[2].length === 11) { return match[2]; } else { console.error("Invalid YouTube URL"); return null; } } function onPlayerStateChange(event) { if (event.data === YT.PlayerState.ENDED) { durationWatched = Math.floor((Date.now() - startTime) / 1000); sendDurationToServer(durationWatched); // Load the next video currentVideoIndex++; if (currentVideoIndex < videoLinks.length) { createPlayer(); } } else if (event.data === YT.PlayerState.PAUSED && durationWatched > 0) { event.target.playVideo(); } } function updateDurationWatched(currentPlayer) { if (currentPlayer && currentPlayer.getPlayerState() === YT.PlayerState.PLAYING) { var currentTime = currentPlayer.getCurrentTime(); durationWatched = Math.floor(currentTime); } } function sendDurationToServer(duration) { var xhr = new XMLHttpRequest(); xhr.open("POST", "track_video.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send("duration=" + duration); }</script>This is how i am fetching videos from db
// Fetch 15 video URLs from the database$query = "SELECT videolink FROM users_video ORDER BY RAND() LIMIT 15";$result = mysqli_query($con, $query);// Store video links in an array$videoLinks = array();while ($row = mysqli_fetch_assoc($result)) { $videoLinks[] = $row['videolink'];Following is my track_video.php file
<?php$user_id = 1; $video_id = $_POST['video_id']; $duration_watched = $_POST['duration']; // Insert the duration watched into the database$query = "INSERT INTO video_tracking (user_id, video_id, duration_watched, timestamp) VALUES (?, ?, ?, NOW())";$stmt = $mysqli->prepare($query);foreach ($video_id as $video) { $stmt->bind_param("iss", $user_id, $video, $duration_watched); $stmt->execute();}$stmt->close();// Close the database connection$mysqli->close();?>