Question

我正在使用循环来旋转网站首页上的各种内容，其中一些内容需要是youtube视频。我希望在用户播放视频时暂停循环，但我正在努力解决它。

这里的示例：How do I attach a jQuery event handler to a YouTube movie?似乎不再起作用，是否有人知道更新的技术？除了我在这里发现的几篇帖子之外，谷歌并没有太多变化，这些帖子似乎都没有用（我认为谷歌已经改变了YT API，因为它们已经制作好了......）

任何帮助表示赞赏！

Answer 1

我有类似的问题，但对于Vimeo。我提出的解决方案应该适用于YouTube或任何类似的嵌入。

对于轮播，只需显示视频缩略图。 YouTube和Vimeo都提供了一种直观的方式来获取各种分辨率的缩略图（例如，YouTube How do I get a YouTube video thumbnail from the YouTube API?）。确保每张图片都有一个（唯一的）ID，您可以从中获取嵌入视频所需的所有详细信息（例如，您只需将YouTube ID用作HTML ID）。

将jQuery单击处理程序附加到图像。点击处理程序从图像的ID中获取要显示的视频的相关信息，隐藏轮播容器并插入相关代码以在与旋转木马具有相同位置的另一个元素中显示视频。

例如： -

<div id="carousel">
  <img src="youtubethumbnailurl1" id="1234" />
  <img src="youtubethumbnailurl2" id="2345" />
  <img src="youtubethumbnailurl3" id="3456" />
</div>

<div id="video"></div>


<script type="text/javascript">
  jQuery( function($) {
    $('#carousel img').click( function(e){
      e.preventDefault;
      $('#carousel').hide();
      var video_id = $(this).attr("id");
      $('#video').html( vid_iframe(video_id) ).show();
      return false;
    });

    function vid_iframe( video_id ) {
      return "<iframe src='youtubeurl'+video_id+'youtubeParameters'?</iframe>";
    }
  });
</script>

如果需要，您需要添加适当的处理程序来关闭视频并返回传送带。

它有点复杂，但适用于任何类型的嵌入，并且还为事物的显示方式提供了很大的灵活性（例如，在我的情况下，缩略图必须比播放时的实际视频小得多）。

Answer 2

您想暂停循环（悬停时），然后播放视频（点击）。

在视频上简单地分隔一个空div（#slidestop）（匹配视频容器的CSS属性，使其大小相同），并添加以下代码，它就像一个魅力！

 $('#slidestop').hover(function() { 
 $('#homeslides').cycle('pause'); 
 $('#slidestop').hide();
 });

jQuery循环和嵌入式Youtube视频 - 在视频播放时暂停

2 个答案: