jQuery HTML5视频在指定时间停止播放

在本文中，我们将介绍如何使用jQuery来控制HTML5视频在指定时间停止播放的方法。

什么是HTML5视频

HTML5视频是指在网页上使用HTML5标签来嵌入和播放视频文件的技术。HTML5视频优于传统的Adobe Flash视频，因为它更轻量级、更易于实现，并且兼容性更好。

嵌入HTML5视频

HTML5视频的嵌入非常简单，只需要使用<video>标签并指定视频文件的路径即可。例如，以下是一个简单的HTML5视频嵌入代码：

<video controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

上面的代码中，<video>标签用于嵌入视频，<source>标签用于指定视频文件的路径和类型，controls属性用于在视频上显示控制条，最后一个<source>标签之间的文本用于在不支持HTML5视频的浏览器上显示备用文本。

使用jQuery控制视频播放

要使用jQuery控制HTML5视频的播放，我们需要先引入jQuery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

开始播放视频

要通过jQuery开始播放HTML5视频，我们可以使用play()方法。例如，以下代码演示了如何通过点击按钮开始播放视频：

<video id="my-video" controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<button id="play-button">播放视频</button>

<script>
   $(document).ready(function() {$ ("#play-button").click(function() {
      $("#my-video")[0].play();
    });
  });
</script>

上面的代码中，我们给播放按钮绑定了一个点击事件，每当按钮被点击时，就会调用play()方法来开始播放视频。

停止视频播放

要通过jQuery停止HTML5视频的播放，我们可以使用pause()方法。例如，以下代码演示了如何通过点击按钮停止视频播放：

<video id="my-video" controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<button id="stop-button">停止播放</button>

<script>
   $(document).ready(function() {$ ("#stop-button").click(function() {
      $("#my-video")[0].pause();
    });
  });
</script>

上面的代码中，我们给停止按钮绑定了一个点击事件，每当按钮被点击时，就会调用pause()方法来停止视频播放。

在指定时间停止视频播放

要通过jQuery在指定时间停止HTML5视频的播放，我们可以使用currentTime属性。该属性表示视频当前播放的时间（以秒为单位），我们可以通过设置这个属性来定位视频的播放位置。例如，以下代码演示了如何在指定时间停止视频播放：

<video id="my-video" controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<button id="stop-time-button">在指定时间停止播放</button>

<script>
   $(document).ready(function() {$ ("#stop-time-button").click(function() {
      var video = $("#my-video")[0];
      video.currentTime = 10; // 在10秒处停止播放
      video.pause();
    });
  });
</script>

上面的代码中，我们给停止按钮绑定了一个点击事件，每当按钮被点击时，就会将currentTime属性设置为10（代表10秒），然后调用pause()方法来停止视频播放。