如何在 YouTube 上使用 JavaScript 停止视频？

在本教程中，我们将学习如何在 YouTube 上使用 JavaScript 停止视频。使用“iframe”HTML 元素，我们可以在应用程序中轻松嵌入 YouTube 视频。它是一个 HTML 5 中的视频播放器，并且具有许多用户可以根据其需求使用的属性。

在某些情况下，您可能希望为嵌入的 YouTube 视频创建自定义暂停或停止按钮。自定义按钮总是比默认按钮更漂亮，使 UI 更美观。

因此，我们将学习两种不同的方法来为 YouTube 视频创建自定义停止按钮。但是，用户可以在加载网页时调用stopVideo()函数以停止所有视频。它可能有各种用途，但在这里我们将看到它用于创建自定义按钮。

使用 contentWindow.postMessage() 方法

contentWindow.postMessage() 向特定元素发送消息。在我们的例子中，我们将使用此方法发出停止 YouTube 视频的命令并调用 stopVideo() 函数。

我们可以使用此方法停止或暂停 YouTube 视频。停止视频意味着如果用户再次播放 YouTube 视频，它将从头开始。当用户暂停 YouTube 视频时，如果用户再次播放，它将从用户暂停的位置开始。

在这里，我们将分别创建停止和暂停按钮，并为这两个按钮添加不同的功能，就像我们上面讨论的那样。

语法

用户可以按照以下语法使用 contentWindow.postMessage() 方法。

// to stop the YouTube video
Video_element.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');

// To pause the YouTube video
Video_element.contentWindow.postMessage('{"event":"command","func":"PauseVideo","args":""}', '*');

在上面的语法中，用户可以看到我们已将命令作为事件给出。此外，我们使用空参数调用pauseVideo()和stopVideo()函数来使我们的按钮起作用。

示例

在下面的示例中，我们在网页上嵌入了 YouTube 视频。此外，我们还创建了停止和暂停按钮。当用户单击任何按钮时，它将根据按钮点击调用 stop() 和 pause() 函数。

<html>
<head>
<title> Stop Youtube video using JavaScript. </title>
</head>
<style>
   button {
      height: 30px;
      width: 80px;
      background-color: aqua;
   }
</style>
<body>
   <h2> Stop YouTube video using JavaScript. </h2>
   <!-- embedding the YouTube video -->
   <iframe id="videoId" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"> </iframe>
   <button onclick = "stop()"> stop </button>
   <button onclick = "pause()"> pause </button>
   <script>
      // to stop the video
      function stop() {
         let video = document.getElementById("videoId")
         video.contentWindow.postMessage( '{"event":"command", "func":"stopVideo", "args":""}', '*');
      }
      // to pause the video
      function pause() {
         let video = document.getElementById("videoId")
         video.contentWindow.postMessage( '{"event":"command", "func":"pauseVideo", "args":""}', '*');
      }
   </script>
</body>
</html>

在上面的输出中，用户可以测试停止和暂停按钮的不同功能。

通过重新分配 <iframe> 的“src”属性的值

此方法将简单地替换<iframe>元素的 src 属性值。当我们替换相同的视频 URL 时，它将从头开始并作为停止功能工作。

语法

var iframe = document.querySelector( “iframe” );
var temp = iframe.src; 
iframe.src = temp; // re-initializing the src attribute value

示例

在下面的示例中，我们创建了停止按钮。当用户单击停止按钮时，它将调用名为 stopVideo() 的 JavaScript 函数。在 stopVideo() 函数中，我们访问所有<iframe>元素并将“src”属性值重新初始化为从头开始 YouTube 视频。

<html>
<head>
    <title> Stop YouTube video using JavaScript. </title>
</head>
<style>
   button {
      height: 30px;
      width: 80px;
      background-color: aqua;
   }
</style>
<body>
   <h2> Stop YouTube video using JavaScript. </h2>
   <!-- embedding the YouTube video -->
   <iframe src = "https://www.youtube.com/embed/km8oWHR_m18?enablejsapi=1"> </iframe>
   <button onclick = "stopVideo(body)"> stop </button>
   <script>
      // to stop the video
      function stopVideo(element) {
         // getting every iframe from the body
         var iframes = element.querySelectorAll('iframe');
         // reinitializing the values of the src attribute of every iframe to stop the YouTube video.
         for (let i = 0; i < iframes.length; i++) {
            if (iframes[i] !== null) {
               var temp = iframes[i].src;
               iframes[i].src = temp;
            }
         }
      };
   </script>
</body>
</html>

在上面的输出中，用户可以看到他们可以通过单击一次停止多个 YouTube 视频。

我们学习了两种不同的停止 YouTube 视频的方法。用户可以为停止和暂停功能创建单独的按钮，并根据需要添加背景图像或样式。

用户应该使用第一种方法，因为它也具有暂停视频的功能。

更新于：2022年8月2日

9K+ 次观看

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告