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

在本文中，我们将介绍如何使用 jQuery 操作 HTML5 视频，以及如何在指定时间停止视频的播放。

HTML5 视频标签

HTML5 引入了 <video> 标签，使得在网页上嵌入视频变得非常简单。我们可以使用 <video> 标签来实现视频的播放、暂停、控制音量和进度等功能。

以下是一个简单的 HTML5 视频标签的示例：

<video id="myVideo" width="320" height="240" controls>
  <source src="my_video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的示例中，我们使用了 <video> 标签来嵌入一个名为 “my_video.mp4” 的视频文件。该视频标签的 id 属性为 “myVideo”，用于在 jQuery 中获取视频元素。

使用 jQuery 控制视频播放

要使用 jQuery 控制视频的播放，我们首先需要获取到视频元素。可以通过 id 属性选择器来获取视频元素，然后使用 jQuery 提供的方法来实现不同的操作。

以下是一些常用的 jQuery 方法和事件，用于控制视频的播放：

play()：开始播放视频。
pause()：暂停视频的播放。
currentTime：获取或设置视频的当前播放时间。
ended 事件：当视频播放结束时触发。

以下是一个示例，演示如何使用 jQuery 控制视频的播放和暂停：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(document).ready(function(){
  // 获取视频元素
  var video =("#myVideo")[0];

  // 播放视频
  ("#playButton").click(function(){
    video.play();
  });

  // 暂停视频("#pauseButton").click(function(){
    video.pause();
  });
});
</script>

<button id="playButton">播放</button>
<button id="pauseButton">暂停</button>

在上面的示例中，我们通过点击按钮来控制视频的播放和暂停。其中，点击”播放”按钮将调用 play() 方法开始播放视频，点击”暂停”按钮将调用 pause() 方法暂停视频的播放。

在指定时间停止视频播放

如果我们希望视频在达到指定的时间后自动停止播放，可以使用 pause() 方法来实现。我们可以通过监听视频的 timeupdate 事件，获取视频的当前播放时间，并在达到指定时间后调用 pause() 方法来停止播放。

以下是一个示例，演示如何在指定时间停止视频播放：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(document).ready(function(){
  // 获取视频元素
  var video =("#myVideo")[0];

  // 在指定时间停止播放视频
  video.addEventListener("timeupdate", function(){
    if (video.currentTime >= 10) {
      video.pause();
    }
  });
});
</script>

<video id="myVideo" width="320" height="240" controls>
  <source src="my_video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>