如何获得YouTube播放器ID并停止视频

从此答案中抓住播放器ID，以及基于播放器ID停止视频的答案，我在WordPress网站上尝试了以下jQuery，以获取YouTube Player ID和停止视频：

var videoID = player.getVideoData()['video_id'];
$(videoID).get(0).stopVideo();

但是，它对我不起作用。

帮助赞赏。

edit ：此页面有两个视频，这些视频是在最新演示文稿下在底部右下单击"播放"按钮的。关闭视频后，包含的DIV简单地被CSS隐藏，并且视频将在后台播放。

edit2 ：

从Zer00ne的答案中，我改编了JavaScript成为：

 jQuery(document).ready(function() {
    jQuery('#toggle1').click(function(){
        jQuery('#video1').appendTo('body');
        jQuery('#video1').addClass('active');
        jQuery('#video2').removeClass('active');
        });
    jQuery('#toggle2').click(function(){
        jQuery('#video2').appendTo('body');
        jQuery('#video2').addClass('active');
        jQuery('#video1').removeClass('active');
    });
    jQuery('#close1').click(function(){
        jQuery('#video1').removeClass('active');
        var YT1 = $(this).next('iframe');
        YT1[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');
    });
    jQuery('#close2').click(function(){
        jQuery('#video2').removeClass('active');
        var YT2 = $(this).next('iframe');
        YT2[0].contentWindow.postMessage(`{
            "event":"command",
            "func":"${'stopVideo'}",
            "args":""
        }`, '*');                    
    });                
});

但是，当我在视频右上单击X时，这并没有停止视频。

在以下演示中，包括OP站点的<iframe> s及其2个祖先以及其兄弟姐妹的级别。开/关按钮已添加以进行演示目的。

jQuery被用作横穿DOM的便捷方法。普通的JavaScript用于访问<iframe>并使用 postmessage api 发送 stopVideo命令。

演示 - 用于功能性演示评论plunk

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <style>
    body {
      background: #000;
      position: relative;
    }
    
    .mfp-container {
      opacity: 0;
      transition: 1s;
    }
    
    .mfp-content {
      position: relative;
      background: #000;
      width: 640px
    }
    
    .mfp-content p {
      position: absolute;
      right: 0;
    }
    
    .active {
      opacity: 1;
      transition: 1s;
    }
    
    #toggle {
      width: 10ch;
      height: 4ex;
      position: absolute;
      right: calc(50% - 5ch);
      top: calc(50% - 2ex);
      z-index: 1;
      outline: 15px solid rgba(255, 0, 0, 0.7);
      color: tomato;
    }
  </style>
</head>
<body>
  <div class="mfp-container" id="video1">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close1">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/q_dv3PoUAM0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <button id='toggle' type='button'>ON / OFF</button>
  <div class="mfp-container active" id="video2">
    <div class="mfp-content">
      <p>
        <img src="https://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/images/icons/close.png" alt="close video" width="20" height="20" id="close2">
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/8GpbJGZ7LEs?enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    $('#toggle').on('click', function() {
      $('.mfp-container').toggleClass('active');
    })
    $('.mfp-content p').on('click', function() {
      var MFP = $(this).closest('.mfp-container');
      var YT = $(this).next('iframe');
      MFP.removeClass('active');
      YT[0].contentWindow.postMessage(`{
    	"event":"command",
    	"func":"${'stopVideo'}",
    	"args":""
    }`, '*');
    });
  </script>
</body>
</html>

演示 - 用于功能性演示评论plunk

相关内容

最新更新

热门标签：