如何在选中视频时自动更新数据库slide_duration字段值？

我来帮你搞定这个需求！结合你描述的场景，我整理了清晰的实现思路和代码示例，你可以直接参考调整👇

你的需求核心是区分「选中视频」和「未选中视频」两种场景，分别处理slide_duration字段的存储逻辑，下面分步骤拆解实现：

1. 逻辑梳理 #

• 当用户选中视频时：调用你已有的从数据库获取视频时长的函数，将返回的时长存入slide_duration字段（可同步填充到输入框，提升用户体验）
• 当用户未选中视频时：保留原有逻辑——若输入框有自定义值则用该值，若为空则恢复默认时长

2. 前端代码示例（原生JS） #

假设你的DOM结构如下：

<!-- 视频选择按钮 -->
<input type="file" id="videoPicker" accept="video/*">
<!-- 时长输入框 -->
<input type="number" id="durationInput" placeholder="输入时长（秒），留空用默认">
<!-- 提交按钮 -->
<button id="submitPost">发布帖子</button>

对应的交互逻辑：

// 你已实现的从数据库获取视频时长的函数（这里保留你的原有逻辑即可）
async function fetchVideoDuration(videoId) {
  // 替换成你实际的数据库请求逻辑
  const res = await fetch(`/api/videos/${videoId}/duration`);
  const data = await res.json();
  return data.duration;
}

// 监听视频选择事件，自动填充时长
document.getElementById('videoPicker').addEventListener('change', async (e) => {
  const selectedVideo = e.target.files[0];
  if (selectedVideo) {
    // 这里假设你能通过选中的视频拿到对应的数据库ID，比如上传后返回的ID
    const videoId = await uploadVideoToDB(selectedVideo); // 替换成你的视频上传逻辑
    const videoDuration = await fetchVideoDuration(videoId);
    // 自动填充到输入框（可选，让用户直观看到时长）
    document.getElementById('durationInput').value = videoDuration;
  }
});

// 提交帖子的核心逻辑
document.getElementById('submitPost').addEventListener('click', async () => {
  const selectedVideo = document.getElementById('videoPicker').files[0];
  const userInputDuration = document.getElementById('durationInput').value.trim();
  let finalDuration;

  if (selectedVideo) {
    // 有选中视频，优先用数据库返回的视频时长
    const videoId = await getSelectedVideoId(); // 替换成获取视频ID的逻辑
    finalDuration = await fetchVideoDuration(videoId);
  } else {
    // 无视频，处理用户输入或默认值
    if (userInputDuration) {
      finalDuration = parseInt(userInputDuration);
      // 可选：添加输入验证，比如不能为负数
      if (finalDuration < 0) {
        alert('时长不能为负数');
        return;
      }
    } else {
      // 留空时恢复默认值，这里假设默认是10秒，替换成你的实际默认值
      finalDuration = 10;
    }
  }

  // 提交到数据库，更新slide_duration字段
  await fetch('/api/posts/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ slide_duration: finalDuration })
  });

  alert('帖子发布成功！');
});

3. 后端补充逻辑（Node.js/Express示例） #

确保后端接收参数时的逻辑和前端匹配：

app.post('/api/posts/create', async (req, res) => {
  const { slide_duration } = req.body;
  try {
    // 替换成你的实际数据库插入/更新逻辑
    await Post.create({ slide_duration });
    res.status(200).json({ success: true });
  } catch (err) {
    res.status(500).json({ success: false, msg: err.message });
  }
});

4. 可选优化点 #

• 如果不需要从数据库拿时长，可直接在前端解析视频文件获取时长：

  function getVideoDurationFromFile(file) {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.preload = 'metadata';
      video.onloadedmetadata = () => {
        window.URL.revokeObjectURL(video.src);
        resolve(Math.floor(video.duration));
      };
      video.onerror = () => reject('无法解析视频时长');
      video.src = window.URL.createObjectURL(file);
    });
  }
  

• 若允许用户选中视频后手动修改时长，可在提交时判断输入框是否被修改，优先保留用户输入

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