【问题标题】:Pause YouTube video within iFrame在 iFrame 中暂停 YouTube 视频
【发布时间】: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

【问题讨论】:

    标签: javascript jquery iframe youtube


    【解决方案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 width="600" height="338" 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&amp;wmode=transparent&autoplay=1";
      });

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

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

      【讨论】:

      • 但是我们如何从我们暂停的地方开始播放视频呢?
      猜你喜欢
      • 2012-11-05
      • 2017-07-18
      • 2012-07-02
      • 2016-08-02
      • 2014-06-11
      • 2012-05-08
      • 1970-01-01
      • 1970-01-01
      • 2012-07-02
      相关资源
      最近更新 更多