嵌入提交表单的HTML5 Video Player点击播放触发表单提交问题求助

问题分析 #

当HTML5 Video播放器嵌入表单内时，点击播放按钮会触发表单提交并跳转到form_submision.php，核心原因是视频控件的点击事件冒泡到表单元素，触发了表单的默认提交行为。

解决方案 #

方案1：阻止视频元素的事件冒泡 #

通过JavaScript阻止视频元素的点击事件向上冒泡，避免触发表单提交：

<form method="post" action="form_submision.php">
  
  <button type="submit" id="submit1">提交1</button>
  <button type="submit" id="submit2">提交2</button>

  <table>
    <tr>
      <td>
        <!-- 补充controls属性启用原生播放控件 -->
        <video id="video1" width="279" height="237" poster="video1.jpg" src="video1.mp4" preload="meta" controls></video>
      </td>
    </tr>
  </table>
</form>

<script>
document.getElementById('video1').addEventListener('click', function(e) {
  // 阻止事件冒泡到表单
  e.stopPropagation();
});
</script>

方案2：限定表单仅响应指定提交按钮的提交动作 #

在表单的提交事件中判断触发源，只有点击指定的提交按钮时才允许提交：

<form method="post" action="form_submision.php" id="myForm">
  
  <button type="submit" id="submit1">提交1</button>
  <button type="submit" id="submit2">提交2</button>

  <table>
    <tr>
      <td>
        <video id="video1" width="279" height="237" poster="video1.jpg" src="video1.mp4" preload="meta" controls></video>
      </td>
    </tr>
  </table>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  const allowedSubmitButtons = ['submit1', 'submit2'];
  // 若触发源不是指定提交按钮，则阻止表单提交
  if (!allowedSubmitButtons.includes(e.submitter?.id)) {
    e.preventDefault();
  }
});
</script>

方案3：将视频移出表单（业务允许时） #

如果视频无需包含在表单内，直接将<video>标签移到表单外部，从根源避免事件冲突：

<form method="post" action="form_submision.php">
  <button type="submit" id="submit1">提交1</button>
  <button type="submit" id="submit2">提交2</button>
</form>

<table>
  <tr>
    <td>
      <video id="video1" width="279" height="237" poster="video1.jpg" src="video1.mp4" preload="meta" controls></video>
    </td>
  </tr>
</table>

注意：示例中给<video>标签补充了controls属性，若需要使用浏览器原生播放控件，该属性是必须的。

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