如何在 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+ 次觀看

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.