如何使用 JavaScript 在 YouTube 上停止视频?
在本教程中，我们将学习使用 JavaScript 在 YouTube 上停止视频。使用"iframe"HTML 元素，我们可以轻松地将 YouTube 视频嵌入到我们的应用程序中。它是 HTML 5 中的视频播放器，具有许多属性，用户可以根据需要使用。
在某些情况下，您可能想要为嵌入的 YouTube 视频创建自定义暂停或停止按钮。自定义按钮总是比默认按钮更漂亮，从而使 UI 更漂亮。
因此，我们将学习两种不同的方法来为 YouTube 视频创建自定义停止按钮。但是，用户可以在加载网页时调用 stopVideo() 函数来停止所有视频。它有多种用途，但在这里我们将看到它用于创建自定义按钮。
使用 contentWindow.postMessage() 方法
contentWindow.postMessage() 向特定元素发送一条消息。在我们的例子中，我们将发出停止 YouTube 视频的命令并使用此方法调用 stopVideo() 函数。
我们可以使用此方法停止或暂停 YouTube 视频。停止视频的意思是，如果用户再次播放 YouTube 视频，它将从头开始播放。当用户暂停 YouTube 视频时，如果用户再次播放，视频将从用户暂停的位置开始播放。
在这里，我们将分别创建停止和暂停按钮，并为两个按钮添加不同的功能，如上所述。
语法
用户可以按照以下语法使用 contentWindow.postMessage() 方法。
// 停止 YouTube 视频
Video_element.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
// 暂停 YouTube 视频
Video_element.contentWindow.postMessage('{"event":"command","func":"PauseVideo","args":""}', '*');
在上述语法中，用户可以看到我们已将命令作为事件给出。此外，我们正在使用 Null 参数调用 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; // 重新初始化 src 属性值
示例
在下面的示例中，我们创建了停止按钮。当用户单击停止按钮时，它将调用名为 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 视频的不同方法。用户可以为停止和暂停功能创建一个单独的按钮，并根据需要为其添加背景图像或样式。
用户应该使用第一种方法，因为它也具有暂停视频的功能。
