如何在 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.