停止视频的实现方式

在网页开发中，有时需要停止播放视频，这种需求在视频广告的场景中非常常见，本文将介绍如何停止视频的实现方式。

方法一：暂停视频

暂停视频是最简单的方法，通过调用HTML5 video标签（<video></video>）对象的pause()方法即可实现：

const video = document.getElementById('my-video');
video.pause();

使用jQuery可以通过以下方式实现：

$('video').trigger('pause');

markdown代码块：

const video = document.getElementById('my-video'); video.pause();

$('video').trigger('pause');

## 方法二：移除video标签

如果暂停视频无法满足需求，可以考虑将video标签从DOM中移除，这样视频就会停止播放。我们可以通过找到video标签的父元素，然后调用jQuery的`remove()`方法来实现：

```javascript
const videoWrapper = $('video').parent();
$('video').remove();
videoWrapper.html('<video></video>'); // 重新创建一个video标签

markdown代码块：

const videoWrapper = $('video').parent(); $('video').remove(); videoWrapper.html('');

## 方法三：使用`MediaStreamTrack.stop()`

另外一种方法是使用MediaStream API中的`MediaStreamTrack.stop()`方法，该方法可以停止媒体轨道中的视频流。这种方式适用于通过getUserMedia()获取的媒体资源。

```javascript
const mediaStream = await navigator.mediaDevices.getUserMedia({video: true});
const videoStreamTrack = mediaStream.getVideoTracks()[0];
videoStreamTrack.stop();

使用jQuery可以通过以下方式实现：

const videoElement = $('video')[0];
const videoStreamTrack = videoElement.srcObject.getVideoTracks()[0];
videoStreamTrack.stop();

markdown代码块：

const mediaStream = await navigator.mediaDevices.getUserMedia({video: true}); const videoStreamTrack = mediaStream.getVideoTracks()[0]; videoStreamTrack.stop();

const videoElement = $('video')[0]; const videoStreamTrack = videoElement.srcObject.getVideoTracks()[0]; videoStreamTrack.stop();