HTML5 Video media事件监听currentTime无效，需传值到PHP变量

我来帮你搞定这个问题！你之前参考的播放状态检测是基础，但要实时获取并传递播放时长，得结合专门的进度事件+AJAX异步请求——毕竟PHP是服务器端脚本，页面加载完成后就不会再主动监听前端的动态变化，必须通过前端主动把数据传过去。

一、前端实时捕获播放时长 #

核心是用timeupdate事件，这个事件会在视频播放位置变化时自动触发（默认每秒约4次，完全满足实时需求），而不是只检测播放状态。下面是完善后的前端代码：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Html5 media events</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <video id="myVideo" controls width="600">
        <source src="your-video-file.mp4" type="video/mp4">
        你的浏览器不支持HTML5视频
    </video>

    <script>
        const video = document.getElementById('myVideo');
        
        // 监听进度变化事件，实时获取currentTime
        video.addEventListener('timeupdate', function() {
            // 保留两位小数，避免浮点精度问题
            const currentTime = Math.round(this.currentTime * 100) / 100;
            console.log('当前播放时长：', currentTime); // 实时打印到控制台
            
            // 把时长传给PHP后端
            sendTimeToServer(currentTime);
        });

        // 用AJAX异步发送数据到PHP
        function sendTimeToServer(time) {
            $.ajax({
                url: 'save-play-time.php', // 你的PHP文件路径
                type: 'POST',
                data: { currenttime: time },
                success: function(response) {
                    // 可选：查看后端返回的结果
                    console.log('后端已接收时长：', response);
                },
                error: function(xhr, status, error) {
                    console.error('发送失败：', error);
                }
            });
        }
    </script>
</body>
</html>

二、后端PHP接收并存储变量 #

接下来创建save-play-time.php文件，用来接收前端传过来的currenttime值，你可以把它存入会话、数据库，或者直接用于后续业务逻辑：

<?php
// 开启会话（如果需要在其他页面复用这个变量）
session_start();

// 接收前端POST过来的时长数据
if(isset($_POST['currenttime'])){
    // 转为浮点型，确保数据精度
    $currenttime = floatval($_POST['currenttime']);
    
    // 示例1：存入会话，方便其他PHP页面调用
    $_SESSION['current_play_duration'] = $currenttime;
    
    // 示例2：如果需要存入数据库，可以在这里写SQL语句
    // $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
    // $stmt = $pdo->prepare("UPDATE video_progress SET current_time = ? WHERE user_id = ?");
    // $stmt->execute([$currenttime, $_SESSION['user_id']]);
    
    // 返回响应给前端
    echo "已接收当前播放时长：{$currenttime} 秒";
} else {
    echo "未接收到有效时长数据";
}
?>

三、实用优化建议 #

• 减少请求频率：如果觉得timeupdate触发太频繁（比如每秒4次），可以加个节流函数，比如每500毫秒才发送一次请求，降低服务器压力：

  let lastSendTimestamp = 0;
  video.addEventListener('timeupdate', function() {
      const currentTime = Math.round(this.currentTime * 100) / 100;
      const now = Date.now();
      // 每500毫秒发送一次请求
      if(now - lastSendTimestamp > 500){
          sendTimeToServer(currentTime);
          lastSendTimestamp = now;
      }
  });
  

• 避免重复发送：可以判断当前时长和上一次发送的时长是否一致，一致就不发送，进一步优化性能。
• 异常处理：可以在前端判断视频是否处于播放状态，暂停时停止发送请求。

内容的提问来源于stack exchange，提问作者user9442969