在现代 Web 应用程序中，为用户提供跨会话保存进度的无缝体验至关重要。最常见的用例之一是跟踪用户观看了多少视频，以便他们可以从上次停下的地方继续播放。本教程将引导您了解如何使用 JavaScript、localStorage 和事件侦听器来实现这样的系统，同时还集成服务器端通信来存储观看时间。
**
**
所提供的解决方案允许跟踪网页上多个视频的观看时间。它将观看进度存储在浏览器的 localStorage 中，如果用户超过上次观看时间，则使用 POST 请求更新服务器端数据库中的进度。我们的目标是提供一种通用的、可扩展的方法，以最小的努力适用于所有视频。
<video>
<pre class="brush:php;toolbar:false"><video>
<p>: This element embeds a video player on the page.</p>
<p>The>
The data-idvideo="123" is a custom attribute that holds a unique identifier for each video. This ID allows us to track and store the watch progress for individual videos.<br>
<source src="path/to/video.mp4" type="video/mp4">: Specifies the path to the video file and the video format (in this case, MP4)<br>
</source></p>
<pre class="brush:php;toolbar:false">// Function to update the watched time
function updateWatchedTime(video, videoId) {
var timeInSeconds = video.currentTime; // Time watched in seconds
var minutes = Math.floor(timeInSeconds / 60); // Whole part (minutes)
var seconds = timeInSeconds % 60; // Remaining seconds
var decimalTime = minutes + (seconds / 60); // Converts seconds into a fractional minute
// Get the last recorded time for the video (saved in localStorage or a global variable)
var lastRecordedTime = localStorage.getItem("lastRecordedTime_" + videoId);
if (lastRecordedTime === null) {
lastRecordedTime = 0; // Default value if no previous time is found
} else {
lastRecordedTime = parseFloat(lastRecordedTime);
}
// Check if the current time is greater than the last recorded time
if (decimalTime > lastRecordedTime) {
// If the current time is greater, save the new time
var requestData = "VIDEO_ID=" + videoId + "&WATCHED_TIME=" + decimalTime.toFixed(4);
console.log("Sending: " + requestData); // Shows the watched time in decimal (4 decimal places)
// Send the data to the server (replace with actual URL)
$.post("path/to/api", requestData, function(response) {
// Handle server response if needed
console.log("Server response: " + response);
// After saving, update the localStorage with the new watched time
localStorage.setItem("lastRecordedTime_" + videoId, decimalTime.toFixed(4));
});
} else {
console.log("Watched time is less than the last recorded time. No update sent.");
}
}
// Add an event listener for the 'timeupdate' event to all video elements
document.querySelectorAll('.videoCourse').forEach(function(video) {
// Get the video ID (should be uniquely assigned to each video element)
var videoId = video.getAttribute('data-idvideo');
// Add the 'timeupdate' event listener
video.addEventListener('timeupdate', function(event) {
updateWatchedTime(video, videoId); // Pass the video and its ID directly
});
});
**
计算观看进度：该函数首先检索视频的当前时间（以秒为单位）并将其转换为分钟和秒。然后时间将转换为十进制格式（例如，3 分 30 秒变为 3.50）。
检查上次录制时间：使用 localStorage.getItem() 方法，我们检索视频的上次录制时间。如果尚未记录时间（即用户第一次观看视频），则默认为 0。这确保进度跟踪从零开始。
存储时间：如果当前时间大于上次记录时间，则意味着自上次更新以来用户已经观看了更多视频。该函数使用 POST 请求将更新的时间发送到服务器。数据发送成功后，localStorage 会更新为新时间。
2。处理多个视频
该脚本使用 > 向页面上的所有视频添加事件侦听器
事件监听器：每次视频时间更新时（即，当用户观看视频时），都会触发 timeupdate 事件。此事件在视频播放时持续触发，提供了跟踪进度的机会。
querySelectorAll()：此方法选择页面上的所有视频元素，使脚本适用于任意数量的视频。它循环遍历每个视频，附加 timeupdate 侦听器，确保独立跟踪每个视频的观看进度。
**
**
用户观看视频：当用户观看视频时，timeupdate 事件不断触发。
计算观看进度：脚本计算视频的观看时长（以分钟和秒为单位），然后将其转换为十进制格式。
最后记录时间：该脚本将当前观看时间与 localStorage 中保存的最后记录时间进行比较。
必要时更新：如果当前观看时间大于之前保存的时间，则将新时间发送到服务器。之后，新时间将保存在 localStorage 中。
下次访问：下次用户访问该页面时，脚本会检查 localStorage 的上次保存时间。如果可用，它会从用户离开的位置开始跟踪。
**
**
可扩展性：此方法适用于页面上任意数量的视频。它使用 data-idvideo 属性来唯一标识每个视频，使系统无需修改即可扩展。
持久性：使用 localStorage，可以跨会话保存用户的进度。即使页面重新加载或者用户离开并返回，他们的进度也会保留。
无缝集成：该解决方案与现有视频播放器顺利集成，使其可以轻松在已使用 HTML5
以上是使用 JavaScript 跟踪视频观看进度的详细内容。更多信息请关注PHP中文网其他相关文章！
