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

Question

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

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

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

// 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 元素，为每个元素分配一个 class 而不是 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

将 ID 转换为类:

<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);
});

IF 你必须在同一个 .video-wrapper 中添加更多视频，使用 .closest() 正如我在顶部评论的那样，否则 .next() 会正常工作。

说明: 使用 $(this) 让我们确信代码将只对我们单击的元素进行更改，而不是全部。

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

Multiple instances of playing a video on one page using jQuery

javascript

video

jquery

vimeo