如何通过AJAX将Wistia视频实时时间戳存入MySQL数据库

1. 前端代码（HTML + JavaScript） #

先在页面中添加存储时间戳的隐藏输入框，再结合Wistia API获取播放进度，最后用AJAX每秒提交数据到后端。

<!-- 隐藏输入框：用于暂存视频当前时间戳 -->
<input type="hidden" id="videoTimestamp" value="0">

<!-- 引入Wistia官方脚本 -->
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<script>
// 初始化Wistia播放器，替换成你的视频哈希ID（Wistia视频页面URL中的一串字符）
window._wq = window._wq || [];
_wq.push({ id: "your_video_hash", onReady: function(video) {
  // 每秒获取一次播放时间戳
  setInterval(function() {
    const currentTime = video.time(); // 获取当前播放进度（单位：秒）
    // 存入localStorage
    localStorage.setItem("wistiaCurrentTime", currentTime);
    // 更新隐藏输入框的值
    document.getElementById("videoTimestamp").value = currentTime;
  }, 1000);
}});

// 每秒发送时间戳到后端接口
setInterval(function() {
  const timestamp = document.getElementById("videoTimestamp").value;
  // 创建AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open("POST", "save_timestamp.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  // 请求成功/失败的回调（可选，用于调试）
  xhr.onload = function() {
    xhr.status === 200 ? console.log("进度已存储") : console.error("存储失败：" + xhr.responseText);
  };
  // 发送数据：这里的user_id请替换成实际的用户标识（比如从登录会话中获取）
  xhr.send(`timestamp=${encodeURIComponent(timestamp)}&user_id=123`);
}, 1000);
</script>

2. 后端代码（PHP + MySQL） #

创建名为save_timestamp.php的文件，负责接收前端数据并存入MySQL数据库。

<?php
// 替换为你的数据库连接信息
$servername = "localhost";
$db_user = "你的数据库用户名";
$db_pwd = "你的数据库密码";
$db_name = "你的数据库名";

// 建立数据库连接
$conn = new mysqli($servername, $db_user, $db_pwd, $db_name);
if ($conn->connect_error) {
  die("数据库连接失败：" . $conn->connect_error);
}

// 获取前端提交的数据
$timestamp = isset($_POST['timestamp']) ? $_POST['timestamp'] : 0;
$user_id = isset($_POST['user_id']) ? $_POST['user_id'] : 0;

// 预处理SQL语句（防止SQL注入）
$stmt = $conn->prepare("INSERT INTO video_progress (user_id, timestamp, created_at) VALUES (?, ?, NOW())");
$stmt->bind_param("id", $user_id, $timestamp); // "i"代表整数类型，"d"代表浮点数类型

// 执行存储操作
if ($stmt->execute()) {
  echo "进度存储成功";
} else {
  echo "存储错误：" . $stmt->error;
}

// 关闭连接
$stmt->close();
$conn->close();
?>

3. 数据库表结构 #

先在MySQL中创建存储播放进度的表，执行以下SQL语句：

CREATE TABLE video_progress (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT NOT NULL, -- 关联用户ID，用于区分不同用户的播放进度
  timestamp DECIMAL(10,2) NOT NULL, -- 视频播放时间戳（保留两位小数）
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP -- 记录存储时间
);

关键注意事项 #

• 替换所有占位符：比如your_video_hash、数据库连接信息、user_id（要从你的系统登录状态中获取真实用户ID）。
• 调整请求频率：每秒请求可能增加服务器压力，可把1000（毫秒）改成5000，即每5秒提交一次。
• 调试方式：按F12打开浏览器控制台，查看AJAX请求的状态和报错信息。
• 路径正确性：确保save_timestamp.php的路径和AJAX请求中的URL一致。

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