PHP无法直接同步视频播放状态,需前端用JavaScript监听timeupdate事件并每5秒上报进度至后端数据库,后端用INSERT...ON DUPLICATE KEY UPDATE安全存储,新页面加载时立即获取并设置currentTime。

PHP 本身无法直接同步视频播放状态,因为它运行在服务端,不接触浏览器的 video 元素或播放器实例。所谓“同步”,必须靠前端主动上报 + 后端存储 + 其他终端主动拉取或接收通知来实现。
前端必须监听并上报播放进度
浏览器中只有 JavaScript 能读取 video.currentTime,且需在用户交互后(如点击播放)才能可靠获取。单纯靠 PHP 定时查是行不通的。
- 使用
timeupdate事件,但别太频繁(比如每 5 秒发一次),避免请求风暴 - 上报时带上唯一标识:用户 ID(
user_id)、视频 ID(video_id)、当前时间点(current_time)、设备标识(可选,用于多端区分) - 注意:若用户拖动进度条,
timeupdate可能触发多次,建议加防抖(debounce)或只在seeked后强制上报一次
video.addEventListener('timeupdate', throttle(() => {
fetch('/api/save-progress.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
user_id: 123,
video_id: 'vid_abc',
current_time: Math.floor(video.currentTime)
})
});
}, 5000));
PHP 接口要安全存取播放进度
save-progress.php 不是简单写文件,得用数据库(如 MySQL)并做好并发保护——同一用户可能在手机、PC 同时看一个视频。
- 推荐用
INSERT ... ON DUPLICATE KEY UPDATE,主键为(user_id, video_id) - 不要用
file_put_contents()存进度,无原子性,多请求易覆盖 - 务必校验
user_id和登录态(如检查 session 或 token),防止恶意提交 - 返回成功时,可顺带返回服务端记录的时间戳(
updated_at),用于前端对时差做粗略补偿
// save-progress.php 示例(简化)
session_start();
if (!isset($_SESSION['user_id'])) die('Unauthorized');
$user_id = (int)$_SESSION['user_id'];
$data = json_decode(file_get_contents('php://input'), true);
$video_id = $data['video_id'] ?? '';
$current_time = (int)($data['current_time'] ?? 0);
if (!$video_id || $current_time < 0) die('Invalid');
$stmt = $pdo->prepare("INSERT INTO video_progress (user_id, video_id, current_time, updated_at)
VALUES (?, ?, ?, NOW())
ON DUPLICATE KEY UPDATE current_time = VALUES(current_time), updated_at = NOW()");
$stmt->execute([$user_id, $video_id, $current_time]);
其他终端如何“同步”到最新进度
新打开视频页时,前端需立刻请求当前进度,而不是等 timeupdate 触发后才查——否则用户会从头开始播。
立即学习“PHP免费学习笔记(深入)”;
- 页面加载完成(
DOMContentLoaded)后,立即 GET/api/get-progress.php?video_id=xxx - PHP 接口查库,返回
current_time;若无记录,返回0 - 前端拿到后调用
video.currentTime = response.time,再调用video.play()(注意:自动播放受浏览器策略限制,可能需用户手势唤醒) - 如果要做“实时协同”(如多人同时看并跳转同步),就得引入 WebSocket(如 Swoole 或 Redis Pub/Sub),PHP 仅作信令中转,不负责推送逻辑
容易被忽略的边界问题
很多项目卡在这些细节上:用户退出登录后进度丢失、横竖屏切换导致 video 元素重建却没恢复进度、PWA 离线时无法上报、HLS/DASH 播放器(如 hls.js)的 currentTime 计算方式和原生不同。
-
video.duration在元数据未加载完成时为NaN,要等loadedmetadata后再设currentTime - 移动端 Safari 对
video.play()的限制更严,恢复进度后最好加个按钮让用户手动点一下再播放 - 如果视频分 P(如 Bilibili 式),
video_id必须包含分 P 标识(如av123_p2),否则所有分 P 进度会互相覆盖











