You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在WordPress站点记录用户视频操作并生成表格化记录?

解决方案:WordPress视频用户操作记录方案

针对你在WordPress站点上追踪用户视频操作的需求,我整理了两种可行方案:一种是用现成插件快速落地,另一种是自定义开发满足高度定制需求,具体如下:

一、现成插件方案(快速上手,无需代码)

如果不想折腾开发,直接用成熟插件就能快速实现操作记录和表格展示:

  • WP Video Stats:这款插件支持追踪原生视频、YouTube/Vimeo嵌入视频的全量操作(播放/暂停/停止/重播/快进快退),后台会自动生成按用户维度统计的表格,能清晰看到每个用户的操作类型、对应视频时间点,甚至快进快退的秒数。激活后只需在设置里关联你的视频内容,就能自动开始追踪。
  • Video Analytics for WordPress:除了基础操作追踪,它支持按用户、视频筛选导出表格数据,快进快退的秒数会被精准记录,还能生成简单的行为趋势图,方便你快速定位用户关注的视频片段。

使用步骤很简单:安装激活插件 → 开启视频操作追踪 → 进入插件统计面板查看/导出表格形式的用户操作记录。

二、自定义开发方案(高度定制,适配特殊需求)

如果插件的功能无法完全匹配你的业务场景,比如需要和现有用户系统深度集成,或者自定义记录字段,可以尝试以下开发思路:

1. 前端:监听视频操作事件

针对页面中的视频元素(原生<video>或第三方嵌入视频),通过JavaScript监听对应操作事件,把数据发送到WordPress后端:

// 获取页面中的视频元素(可根据实际情况调整选择器)
const video = document.querySelector('video[data-video-id]');
let lastPlayTime = 0;

// 监听播放事件
video.addEventListener('play', () => {
  sendTrackData('Play', video.currentTime);
});

// 监听暂停事件
video.addEventListener('pause', () => {
  sendTrackData('Pause', video.currentTime);
});

// 监听视频结束(停止)事件
video.addEventListener('ended', () => {
  sendTrackData('Stop', video.currentTime);
});

// 监听快进/快退操作
video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  // 设置1秒阈值,避免正常播放的微小时间波动被误判
  if (currentTime - lastPlayTime > 1) {
    sendTrackData(`Move forward (${Math.round(currentTime - lastPlayTime)}s)`, currentTime);
  } else if (lastPlayTime - currentTime > 1) {
    sendTrackData(`Move back (${Math.round(lastPlayTime - currentTime)}s)`, currentTime);
  }
  lastPlayTime = currentTime;
});

// 监听自定义重播按钮(如果有)
document.querySelector('.video-replay-btn')?.addEventListener('click', () => {
  video.currentTime = 0;
  video.play();
  sendTrackData('Replay', 0);
});

// 发送数据到WordPress后端
function sendTrackData(action, currentTime) {
  // 利用WordPress REST API发送请求,需要提前加载wp-api脚本
  fetch('/wp-json/custom/v1/track-video-action', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-WP-Nonce': wpApiSettings.nonce // 验证请求合法性
    },
    body: JSON.stringify({
      user_id: wpApiSettings.currentUserId, // 当前登录用户ID
      video_id: video.dataset.videoId, // 视频的自定义ID(需在视频元素上添加data-video-id属性)
      action: action,
      video_timestamp: currentTime,
      record_time: new Date().toISOString()
    })
  });
}

2. 后端:存储数据并生成表格

  • 创建自定义数据库表:在WordPress中新增一张表,用来存储用户操作记录,字段包括id(主键)、user_idvideo_idaction_typeaction_details(比如快进秒数)、video_timestamprecord_time
  • 注册REST API端点:接收前端发送的数据,插入到数据库表中:
// 插件激活时创建数据库表
function create_video_action_table() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'video_user_actions';
  $charset_collate = $wpdb->get_charset_collate();

  $sql = "CREATE TABLE $table_name (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    user_id mediumint(9) NOT NULL,
    video_id mediumint(9) NOT NULL,
    action_type varchar(50) NOT NULL,
    action_details varchar(100) DEFAULT '',
    video_timestamp float NOT NULL,
    record_time datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
    PRIMARY KEY  (id)
  ) $charset_collate;";

  require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  dbDelta($sql);
}
register_activation_hook(__FILE__, 'create_video_action_table');

// 注册REST API端点
function register_video_track_endpoint() {
  register_rest_route('custom/v1', '/track-video-action', array(
    'methods' => 'POST',
    'callback' => 'handle_video_track_data',
    'permission_callback' => function() {
      return is_user_logged_in(); // 仅允许登录用户提交数据
    }
  ));
}
add_action('rest_api_init', 'register_video_track_endpoint');

// 处理前端提交的数据
function handle_video_track_data($request) {
  global $wpdb;
  $table_name = $wpdb->prefix . 'video_user_actions';
  $data = $request->get_json_params();

  // 拆分操作类型和详情(比如把"Move forward (5s)"拆分为类型和秒数)
  $actionParts = explode(' ', $data['action'], 2);
  $actionType = $actionParts[0];
  $actionDetails = isset($actionParts[1]) ? $actionParts[1] : '';

  $wpdb->insert(
    $table_name,
    array(
      'user_id' => $data['user_id'],
      'video_id' => $data['video_id'],
      'action_type' => $actionType,
      'action_details' => $actionDetails,
      'video_timestamp' => $data['video_timestamp']
    ),
    array('%d', '%d', '%s', '%s', '%f')
  );

  return rest_ensure_response(array('status' => 'success'));
}
  • 后台表格展示:使用WordPress原生的WP_List_Table类创建一个后台页面,读取数据库中的记录并生成表格,支持按用户、视频筛选,还能添加导出CSV的功能,方便你后续分析数据。

三、数据利用建议

记录下来的操作表格可以帮你优化视频内容:

  • 分析用户频繁暂停的时间段,调整内容节奏或补充关键信息
  • 查看用户重播率高的视频片段,提炼优质内容模块
  • 统计快进/快退的频率,判断内容是否过于冗长或信息密度不足

内容的提问来源于stack exchange,提问作者sysmonet

火山引擎 最新活动