Question

我正在研究别人编码的Wordpress项目，并坚持如何使通过动画关闭的视频停止与下面的代码关联的视频。我在整个项目中进行了搜索，但是无法找到并弄清楚此上下文中的.api是指什么。

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('#view_video').click(function(){
    jQuery('.video_need').animate({
        height: 'show' 
    });
    jQuery('.video_need iframe').api("play");
  });
  jQuery('#close_video').click(function(){
    jQuery('.video_need').animate({
        height: 'hide' 
    }, 1000);
  });
});

Answer 1

未经测试，但遵循这些原则。不确定.api()是什么。

jQuery(document).ready(function(){
  jQuery('#view_video').click(function(){
    jQuery('.video_need').animate({
        height: 'show' 
    });
    jQuery('.video_need iframe').api("play");
  });
  jQuery('#close_video').click(function(){
    jQuery('.video_need').animate({
        height: 'hide' 
    }, {
      duration: 1000,
      // animation completion callback
      complete: function() {
        jQuery('.video_need iframe').api("stop");
      }
    });
  });
});

Answer 2

当我触摸另一个视频时，上一个视频不会停止播放，我无法修复

            jQuery('.video-with-trailer').each(function(i, obj) {
      jQuery(this).on("touchmove", function() { hoverVideo(i); });        
      jQuery(this).on("scroll", function() { hideVideo(i); });
             });
    function hoverVideo(i) {
      var playPromise = jQuery('.wpst-trailer')[i].play();
      if (playPromise !== undefined) {
          playPromise.then(_ => {
          // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
     /* video.pause();*/
      })
      .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
      });
      }
    }
    function hideVideo(i) {
      //jQuery('.wpst-trailer')[i].currentTime = 0; 
      jQuery('.wpst-trailer')[i].load(); 
    }

关闭并停止播放视频

2 个答案: