Question

我有一些代码在视频上显示封面图片，点击所述图片后会自动播放视频。目前，此代码适用于一页上的一个视频（因为它使用ID）。

代码依靠Froogaloop来控制和播放Vimeo。

使用jQuery如何转换以下代码，以便它可以在页面上使用多于1个视频（目前它已中断）：

// Control Vimeo videos
var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

var playButton = document.getElementById("play-me");

playButton.addEventListener("click", function() {
  player.api("play");
    $('.bg-image').addClass('hide-me');

    setTimeout(function(){
        $('.bg-image').css('z-index','-1');
    }, 1000);
});

这是我的HTML：

<div class="video-wrapper">
    <div class="bg-image" id="play-me">
       <span class="play">
         <i class="i-play"></i>
       </span>
    </div>
    <iframe src="" id="video"></iframe>
</div>

Answer 1

假设页面上有多个play-me元素，请为每个元素分配一个类而不是ID。然后只需添加一个包含现有代码的单击处理程序，确保使用this以确保在单击的元素上调用方法调用。

由于您在超时时间设置z-index，您可能只想将其他所有内容放在那里。

$('.play-me').on('click', function(e) {
  var $this = $(this);

  setTimeout(function() {
    player.api('play');

    $this
      .css('z-index', '-1')
      .addClass('hide-me');
  }, 1000);
});

Answer 2

视频如何设置？是通过HTML硬编码的吗？我不能评论，这应该是一个评论...顺便说一下，为什么混合使用jquery和普通的javascript？

Answer 3

Conver ID to class：

<div class="video-wrapper">
    <div class="bg-image" class="play-me">
       <span class="play">
         <i class="i-play"></i>
       </span>
    </div>
    <iframe src="" class="video"></iframe>
</div>

并将你的js / jquery修改为：

var playButton = $(".play-me");

playButton.get(0).addEventListener("click", function() {
    var iframe = $(this).next('.video').get(0),// or use closest() based on your condition
    player = $f(iframe);
    player.api("play");
    $(this).addClass('hide-me');

    setTimeout(function(){
        $(this).css('z-index','-1');
    }, 1000);
});

如果您必须在同一.video-wrapper内添加更多视频，使用.closest()，因为我在顶部评论，否则.next()将正常工作。

<强>解释：使用$(this)可以让我们确信代码会对我们点击的所有元素进行更改。

使用jQuery在一个页面上播放视频的多个实例

3 个答案: