在 iFrame 中暂停 YouTube 视频

Posted 2023-05-09

【中文标题】在 iFrame 中暂停 YouTube 视频

【英文标题】：Pause YouTube video within iFrame

【发布时间】：2017-04-11 14:22:57

【问题描述】：

点击 关闭按钮 后，我在后台播放了一个 YouTube 视频...这是我无法使用的 jQuery：

$('#close1').on('click', function() 
    //  $('#video1').stopVideo();
    $('#video1')[0]
        .contentWindow
        .postMessage('"event":"command","func":"' + 'stopVideo' + '","args":""', '*');    

);

这是一个例子：http://georgehowell.biz/unsw1/index.html

【参考方案1】：

我发现这个有趣的线程与这个问题有关，它有很多解决方案的建议，也许其中任何一个都对你有用：

Stop embedded youtube iframe?

【讨论】：

感谢该链接..此问题的许多变体。 jax297 解决方案在这种情况下几乎可以工作 - 奇怪的是，视频在关闭后几秒钟内又重新开始。我正在寻找一种在单击“关闭”按钮时将“？autoplay=1”从 YouTube 上移除的方法

很高兴看到它对您有所帮助，祝您工作顺利:)

【参考方案2】：

不使用 YouTube 的 iframe_API；你可以简单地使用：

iframe.contentWindow.postMessage(message, origin);

将消息发送到 iframeWindow（从 parentWindow）。这些消息可以包括“playVideo”、“pauseVideo”、“stopVideo”、“muteVideo”等。（任何视频服务，在本例中为 youtube，都支持）

查看以下链接以查看现场演示：

https://codepen.io/mcakir/pen/JpQpwm

【参考方案3】：

更改 1 - iframe src url 此处应为空白

<div id="openModal1" class="modalDialog">
    <div>
        <a href="" title="Close" class="close" id="close1">X</a>  
        <iframe   src="" class="homeVideo" id="video1" allowfullscreen="true" allowscriptaccess="always"></iframe>       
    </div>  <!----END modal-body ---->
</div>  <!----END modal ---->

更改 2：如何播放视频只需在查询字符串上使用 autoplay=yup 设置 src URL - 我们不需要启用 JS api：

$('#thumb1').on('click', function(ev) 
	$("iframe#video1")[0].src = "https://www.youtube.com/embed/Lop0VCYdpGQ?rel=0&wmode=transparent&autoplay=1";
);

更改 3 - 如何暂停 - 只需将 iframe src 设置为空字符串：

    $('#close1').click(function()
		$("iframe#video1")[0].src = "";
    );

【讨论】：

但是我们如何从我们暂停的地方开始播放视频呢？