利用 javascript 暫停或停止嵌入的 Youtube 影片

分享:

要利用 javascript 控制 Youtube 影片,使其暫停或停止,可以參考以下方法,首先嵌入影片的 code 類似這樣:

<iframe width="560" height="315" id="YTVideo" src="https://www.youtube.com/embed/QM_vdeG9vpQ?enablejsapi=1" ></iframe>

注意我有加上 id 是要抓取目標用,另外在網址後面我加上了 ?enablejsapi=1 是允許可以讓 javascript 控制 Youtube 影片,接著準備控制的 html:

<button id="pause">pause</button> <button id="stop">top</button>

各自綁定事件:

const pauseBtn=getElementById("pause");
const stopBtn=getElementById("stop");
const video = document.getElementById("YTVideo")
//暫停
pauseBtn.addEventListener("click", function(){
  video.contentWindow.postMessage( '{"event":"command", "func":"pauseVideo", "args":""}', '*');
}) 
//停止
stopBtn.addEventListener("click", function(){
  video.contentWindow.postMessage( '{"event":"command", "func":"stopVideo", "args":""}', '*');
}) 

 

透過點擊後把事件傳進 iframe 即可。

參考:
How can I stop a video with JavaScript in Youtube?

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。